.bbd-promo-banner__container {
  align-items: flex-start;
  row-gap: var(--gap-lg);
}

.bbd-promo-banner__banner-group {
  grid-row-start: 1;
  grid-column: 1 / span 11;

  @media screen and (width > 750px) {
    grid-row: 1 / 3;
    grid-column: 1 / span 6;
    height: 100%;
  }

  @media screen and (width > 1200px) {
    grid-column: 1 / span 4;
    padding-block-start: 8.75rem;
  }

  > .group-block {
    height: 100%;
    padding: var(--padding-4xl) var(--padding-2xl);

    @media screen and (width > 990px) {
      padding: var(--padding-5xl) var(--padding-4xl);
    }

    @media screen and (width > 1500px) {
      padding: var(--padding-7xl) var(--padding-6xl);
    }
  }

  h2 {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.15);
    text-decoration-thickness: 1px;
    text-underline-offset: 0;
  }

  .arrow-link {
    margin-top: auto;

    @media screen and (width > 1200px) {
      margin-top: var(--margin-4xl);
    }
  }
}

.bbd-promo-banner__large-image {
  grid-column: 2 / -1;
  margin-block-start: -4.25rem;

  image-block[ratio='landscape'] {
    --ratio: 883 / 570;
  }

  @media screen and (width > 750px) {
    grid-row: 1 / 2;
    margin-block-start: 0;
    grid-column: 7 / -1;
  }

  @media screen and (width > 1200px) {
    grid-row-start: 1;
    grid-column: 4 / span 6;
  }
}

.bbd-promo-banner__small-image {
  grid-column: 1 / span 8;

  @media screen and (width > 750px) {
    grid-row: 2 / 3;
    grid-column: 7 / -3;
  }

  @media screen and (width > 1200px) {
    grid-row-start: 1;
    grid-column: -4 / -1;
    padding-block-start: 13rem;
  }
}

.bbd-promo-banner__large-image,
.bbd-promo-banner__small-image {
  image-block {
    --image-height: 100%;
    max-width: unset;
  }
}

@media screen and (width < 750px) {
  .bbd-promo-banner__large-image,
  .bbd-promo-banner__small-image {
    image-block {
      --ratio: 1;
      max-width: unset;
    }
  }
}

@media screen and (width > 750px) and (width < 1200px) {
  .bbd-promo-banner__large-image,
  .bbd-promo-banner__small-image {
    height: 100%;

    image-block {
      height: 100%;

      img {
        height: 100%;
      }
    }
  }
}