.hero {
  position: relative;
  width: 100%;
  min-height: 720px;
  margin: 0 auto;
  display: grid;
  overflow: hidden;
  background: #f7f1e8;
}

.hero__inner {
  position: relative;
  width: 100%;
  min-height: inherit;
  margin: 0 auto;
  padding-left: clamp(22px, 8vw, 150px);
  display: block;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  padding: 44px 0 80px;
}

.hero__title {
  margin: 0;
  color: #111111;
  width: max-content;
  max-width: none;
  font-size: clamp(6.8rem, 8.2vw, 8.9rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.82;
  text-transform: uppercase;
}

.hero__subtitle {
  margin: 20px 0 0;
  color: #8a7766;
  max-width: 430px;
  font-size: clamp(2rem, 2vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 12px;
  line-height: 1.1;
  text-transform: uppercase;
}

.hero__rule {
  width: 28px;
  height: 2px;
  margin-top: 22px;
  display: block;
  background: #9c8268;
}

.hero__text {
  max-width: 460px;
  margin: 24px 0 0;
  color: #766c63;
  font-size: clamp(0.98rem, 1.12vw, 1.1rem);
  font-weight: 500;
  line-height: 1.55;
}

.hero__categories {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  color: #111111;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 6px;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero__categories span {
  display: inline-flex;
  align-items: center;
}

.hero__categories span + span::before {
  content: "";
  width: 1px;
  height: 20px;
  margin: 0 24px;
  display: inline-block;
  background: #d9c7b3;
}

.hero__badges {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__badge {
  min-height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d5bfa7;
  border-radius: 999px;
  color: #67594f;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
}

.hero__badge .fa {
  color: #9a8068;
  font-size: 1.05rem;
}

.hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.hero__button {
  min-width: 190px;
  min-height: 54px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid #111111;
  border-radius: 6px;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.hero__button:hover {
  transform: translateY(-1px);
}

.hero__button--primary {
  color: #ffffff;
  background: #111111;
}

.hero__media {
  position: absolute;
  top: 0;
  bottom: 80px;
  right: -70px;
  z-index: 1;
  width: min(75vw, 1220px);
  min-width: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.42) 8%,
    rgba(0, 0, 0, 0.86) 17%,
    #000000 26%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.42) 8%,
    rgba(0, 0, 0, 0.86) 17%,
    #000000 26%
  );
}

.hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
  }

  .hero__inner {
    width: min(100% - 48px, 760px);
    min-height: auto;
    padding: 52px 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .hero__content {
    max-width: 100%;
    padding: 0;
  }

  .hero__title {
    width: auto;
    max-width: 100%;
    font-size: clamp(4.7rem, 13vw, 6.5rem);
    line-height: 0.88;
  }

  .hero__subtitle {
    max-width: 100%;
  }

  .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__media img {
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 0;
  }

  .hero__inner {
    width: 100%;
    padding-top: 20px;
    gap: 0;
  }

  .hero__content {
    padding: 0 28px;
  }

  .hero__title {
    font-size: clamp(3.55rem, 15vw, 4.8rem);
    line-height: 0.9;
  }

  .hero__subtitle {
    margin-top: 8px;
    font-size: clamp(1rem, 4.8vw, 1.34rem);
    letter-spacing: 7px;
  }

  .hero__rule {
    margin-top: 12px;
  }

  .hero__text {
    max-width: 100%;
    margin-top: 12px;
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .hero__categories {
    margin-top: 16px;
    row-gap: 8px;
    font-size: 0.58rem;
    letter-spacing: 3.2px;
  }

  .hero__categories span + span::before {
    height: 14px;
    margin: 0 11px;
  }

  .hero__badges {
    position: relative;
    z-index: 6;
    margin-top: 16px;
    gap: 8px;
  }

  .hero__badge {
    min-height: 32px;
    padding: 0 11px;
    background: #f7f1e8;
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.04);
    font-size: 0.53rem;
    letter-spacing: 0.55px;
  }

  .hero__actions {
    display: none;
  }

  .hero__media {
    margin-top: -18px;
    width: 100%;
    margin-left: 0;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 7%,
      rgba(0, 0, 0, 0.85) 18%,
      #000000 30%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 7%,
      rgba(0, 0, 0, 0.85) 18%,
      #000000 30%
    );
  }

}