.home-promo {
  --home-promo-gutter: 30px;
  position: relative;
  color: var(--white);
  background-color: var(--red);
}

.home-promo__background.lazy-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  pointer-events: none;
}

.home-promo__layout {
  position: relative;
  display: grid;
  grid-template-columns: calc((100% - 1180px) / 2) minmax(0, 574px) minmax(127px, 1fr) 570px;
  grid-template-areas: ". content . media";
  width: 100%;
  max-width: 1440px;
  box-sizing: border-box;
  margin: 0 auto;
}

.home-promo--reverse {
  margin-bottom: -70px;
}

.home-promo--reverse .home-promo__layout {
  grid-template-columns: 570px minmax(127px, 1fr) minmax(0, 574px) calc((100% - 1180px) / 2);
  grid-template-areas: "media . content .";
}

.home-promo--text-only .home-promo__layout {
  grid-template-columns: minmax(0, 1180px);
  grid-template-areas: "content";
  justify-content: center;
  padding: 0 var(--home-promo-gutter);
}

.home-promo__container {
  grid-area: content;
  min-width: 0;
  align-self: center;
}

.home-promo__content {
  padding: 100px 0;
  overflow-wrap: anywhere;
}

.home-promo__heading {
  margin: 0 0 20px;
  max-width: 480px;
  font-family: var(--font-family);
  font-size: 42px;
  font-weight: 500;
  line-height: 120%;
  color: var(--white);
}

.home-promo__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 574px;
  margin-bottom: 45px;
  font-size: 18px;
  font-weight: 500;
  line-height: 120%;
}

.home-promo__text>* {
  margin: 0;
}

.home-promo__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.home-promo__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.home-promo__button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.home-promo__media {
  position: relative;
  grid-area: media;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
}

.home-promo__image.lazy-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 1441px) {
  .home-promo__media {
    border-radius: 20px 0 0 20px;
  }

  .home-promo--reverse .home-promo__media {
    border-radius: 0 20px 20px 0;
  }
}

@media screen and (max-width: 1279px) {
  .home-promo__layout {
    grid-template-columns: max(30px, calc((100% - 1180px) / 2 + 30px)) minmax(0, 574px) minmax(127px, 1fr) 570px;
  }

  .home-promo--reverse .home-promo__layout {
    grid-template-columns: 570px minmax(127px, 1fr) minmax(0, 574px) max(30px, calc((100% - 1180px) / 2 + 30px));
  }
}

@media screen and (max-width: 1023px) {
  .home-promo .home-promo__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "media";
    justify-content: stretch;
    gap: 0;
    padding: 0;
  }

  .home-promo--reverse {
    margin-bottom: -50px;
  }

  .home-promo--text-only .home-promo__layout {
    grid-template-areas: "content";
  }

  .home-promo .home-promo__content {
    padding: 100px var(--home-promo-gutter) 0;
    margin-bottom: 50px;
  }

  .home-promo__heading {
    font-size: 36px;
    max-width: 100%;
  }

  .home-promo__text {
    font-size: 16px;
    max-width: 520px;
    margin-bottom: 30px;
  }

  .home-promo .home-promo__media {
    height: 395px;
    border-radius: 20px 20px 0 0;
  }

  .home-promo__button {
    max-width: 270px;
  }
}

@media screen and (max-width: 767px) {
  .home-promo--reverse {
    margin-bottom: -35px;
  }

  .home-promo {
    --home-promo-gutter: 15px;
  }

  .home-promo .home-promo__content {
    padding-top: 80px;
    margin-bottom: 40px;
  }

  .home-promo__heading {
    font-size: 26px;
    margin-bottom: 18px;
  }

  .home-promo__text {
    font-size: 14px;
    max-width: 310px;
  }

  .home-promo .home-promo__media {
    height: 292px;
  }
}