/* Общие блоки: контейнер, кнопка .btn, зелёная метка .tag, логотип .brand */

.container {
  width: min(1020px, 100% - 2 * var(--spacing-md));
  margin-inline: auto;
}

/* Логотип: белый на прозрачном, квадрат 512×512 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--color-on-background);
}

.brand__logo {
  width: auto;
  height: calc(var(--spacing-xl) * 0.8);
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 302px;
  height: 72px;
  padding-inline: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-label-md-family);
  font-size: var(--font-label-md-size);
  font-weight: var(--font-label-md-weight);
  text-transform: uppercase;
  text-align: center;
  transition: background var(--duration-fast) var(--easing-standard);
}

.btn--small {
  min-width: 0;
  height: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  box-shadow: 0 23px 16px -19px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-on-background);
  box-shadow: none;
}

@media (hover: hover) {
  .btn:hover {
    background: var(--color-primary-container);
    text-decoration: none;
  }

  .btn--outline:hover {
    background: var(--color-on-background);
    color: var(--color-inverse-on-surface);
  }
}

/* Зелёная метка, слегка повёрнутая: #BOXcutLive и подписи плиток */
.tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-headline-xl-family);
  font-size: var(--font-headline-xl-size);
  font-weight: var(--font-headline-xl-weight);
  line-height: var(--font-headline-xl-line-height);
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.tag--small {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-headline-md-family);
  font-size: var(--font-headline-md-size);
  font-weight: var(--font-headline-md-weight);
  line-height: var(--font-headline-xl-line-height);
}

@media (max-width: 840px) {
  .tag {
    font-size: calc(var(--font-headline-xl-size) * 0.7);
  }
}

@media (max-width: 650px) {
  .container {
    width: calc(100% - 2 * var(--spacing-sm));
  }

  .btn {
    min-width: 165px;
    height: 48px;
    font-size: calc(var(--font-label-md-size) * 0.75);
  }

  .btn--small {
    min-width: 0;
    height: auto;
    font-size: var(--font-label-sm-size);
  }

  .tag {
    font-size: calc(var(--font-headline-xl-size) * 0.5);
  }

  .tag--small {
    font-size: var(--font-label-md-size);
  }

  .brand__logo {
    height: calc(var(--spacing-xl) * 0.55);
  }
}