:root {
  --offerbox-offer-background: var(--color-cyan-light);
  --offerbox-upsell-background: var(--color-midnight);
  --offerbox-upsell-color: var(--color-white);
  --offerbox-padding-block: 5rem;

  @include use-responsive-sizing(--offerbox-padding-inline, (xs: 3.5rem, xl: 5rem));
}

.offer-box__offer {
  background-color: var(--offerbox-offer-background);
  display: grid;
  gap: 2.5rem;
  padding-block: var(--offerbox-padding-block);
  padding-inline: var(--offerbox-padding-inline);
  text-align: center;
}

.offer-box__upsell {
  background-color: var(--offerbox-upsell-background);
  color: var(--offerbox-upsell-color);
  display: grid;
  font-size: 1.4rem;
  gap: 2.5rem;
  padding-block: var(--offerbox-padding-block);
  padding-inline: var(--offerbox-padding-inline);
  position: relative;
  text-align: center;
}

.offer-box__offer + .offer-box__upsell {
  &::after {
    block-size: 0;
    border-block-end: 1.5rem solid var(--color-midnight);
    border-inline: 1.5rem solid transparent;
    content: '';
    inline-size: 0;
    inset-block-start: 0;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-50%, -100%);
  }
}

.offer-box__headline {
  --headline-kicker-spacing: 1rem;

  &:not(:last-child) {
    margin-block-end: -1.5rem;
  }
}

.offer-box__badge {
  color: var(--color-midnight);
  display: flex;
  justify-content: center;
}

.offer-box__icon {
  color: var(--color-orange);
  font-size: 8rem;
}

.offer-box__text {
  line-height: var(--line-height-body);
  margin-inline: auto;
  max-inline-size: 50rem;
}