.banner {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  border-radius: 0 clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) 0
    clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
  margin-top: clamp(6.25rem, 6rem + 1.25vw, 7.5rem);
}

.banner-cup-size {
  margin-top: clamp(6.25rem, 5rem + 6.25vw, 12.5rem);
}

.banner__inner {
  padding-block: clamp(1.5rem, 1.125rem + 1.875vw, 3.375rem)
    clamp(1.6875rem, 0.65625rem + 5.1875vw, 6.875rem);
}

.banner-cup-size__inner {
  padding-block: clamp(5rem, 2.875rem + 10.625vw, 15.625rem)
    clamp(7.5rem, 4rem + 17.5vw, 25rem);
}

.banner-cof-mach-free__inner {
  padding-block: 1.875rem 7.5rem;
}

.banner-how-it-works {
  background-color: var(--color-accent-gold);
}

.banner-how-it-works__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "media"
    "body";
  padding-block: clamp(1.875rem, 1.5rem + 1.875vw, 3.75rem);
}

.banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.banner__title {
  color: var(--color-text-invert);
  font-family: var(--font-body-medium);
  font-size: clamp(1.375rem, 0.65rem + 3.625vw, 5rem);
  line-height: clamp(1.625rem, 0.75rem + 4.375vw, 6rem);
  flex-shrink: 0;
}

.banner-cup-size__title {
  font-size: clamp(1.375rem, 0.9rem + 2.375vw, 3.75rem);
  line-height: clamp(1.625rem, 1.05rem + 2.875vw, 4.5rem);
}

.banner-how-it-works__title {
  grid-area: title;
  margin-bottom: 1.25rem;
}

.banner__text {
  font-family: var(--font-body-regular);
  font-size: clamp(0.9375rem, 0.6875rem + 1.25vw, 2.1875rem);
  line-height: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
  width: 75%;
  opacity: 0.95;
  margin-top: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
}

.banner-cup-size__text {
  font-size: clamp(0.9375rem, 0.6875rem + 1.25vw, 2.1875rem);
  line-height: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
}

.banner-how-it-works__text {
  font-size: clamp(1.125rem, 0.9125rem + 1.0625vw, 2.1875rem);
  line-height: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
  width: 100%;
}

.banner-how-it-works__content {
  grid-area: body;
}

.banner-how-it-works__content .btn {
  margin-top: clamp(1.25rem, 0.8125rem + 2.1875vw, 3.4375rem);
  align-self: flex-start;
  width: 100%;
  white-space: normal;
  text-align: center;
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  padding-block: clamp(0.8125rem, 0.725rem + 0.4375vw, 1.25rem);
  font-family: var(--font-body-bold);
  font-size: clamp(0.8125rem, 0.6875rem + 0.625vw, 1.4375rem);
  line-height: clamp(1.125rem, 0.9625rem + 0.8125vw, 1.9375rem);
}

.banner__deco {
  position: absolute;
  width: clamp(5.3125rem, 3.60625rem + 8.5625vw, 13.875rem);
  height: clamp(4.875rem, 3.2875rem + 7.9375vw, 12.8125rem);
  z-index: 5;
  right: 0;
  bottom: 0;
}

.banner-cup-size__deco {
  position: absolute;
  width: clamp(3.5rem, 1.425rem + 10.375vw, 13.875rem);
  height: clamp(3.75rem, 1.375rem + 11.875vw, 15.625rem);
  z-index: 5;
  left: 5%;
  top: var(--space-xs);
}

.banner-cup-size__deco-big {
  position: absolute;
  width: clamp(8.25rem, 5.075rem + 15.875vw, 24.125rem);
  height: clamp(7.125rem, 4.375rem + 13.75vw, 20.875rem);
  z-index: 5;
  right: 5%;
  bottom: 1rem;
}

.banner-cof-mach-free__deco {
  position: absolute;
  width: clamp(8.3125rem, 4.85rem + 17.3125vw, 25.625rem);
  height: clamp(7.6875rem, 4.475rem + 16.0625vw, 23.75rem);
  z-index: 5;
  right: 5%;
  bottom: 1rem;
}

.banner-how-it-works__deco {
  grid-area: media;
  position: relative;
}

.banner-how-it-works__deco-img {
  width: clamp(12.5rem, 7.5rem + 25vw, 37.5rem);
  height: clamp(9.375rem, 5.25rem + 20.625vw, 30rem);
  margin: 0 auto;
  flex-shrink: 0;
}

.banner-how-it-works__deco_star-top {
  position: absolute;
  width: clamp(1.1875rem, 0.65rem + 2.6875vw, 3.875rem);
  height: clamp(1.1875rem, 0.65rem + 2.6875vw, 3.875rem);
  z-index: 5;
  right: 40%;
  top: 5%;
}

.banner-how-it-works__deco_star-left {
  position: absolute;
  width: clamp(1.375rem, 0.775rem + 3vw, 4.375rem);
  height: clamp(1.375rem, 0.775rem + 3vw, 4.375rem);
  z-index: 5;
  left: 18%;
  bottom: 8%;
}

.banner-how-it-works__deco_star-right {
  position: absolute;
  width: clamp(0.875rem, 0.475rem + 2vw, 2.875rem);
  height: clamp(0.875rem, 0.475rem + 2vw, 2.875rem);
  z-index: 5;
  right: 23%;
  bottom: 24%;
}

.office-final-cta {
  background-color: var(--color-accent-gold);
  color: var(--color-primary);
}

.office-final-cta .banner__inner {
  padding-block: clamp(1.5rem, 1.125rem + 1.875vw, 3.375rem);
}

.office-final-cta .banner__title {
  color: var(--color-primary);
}

.office-final-cta__wrap {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 961px) {
  .banner-cup-size__inner {
    padding-block: 3.75rem;
  }

  .banner-how-it-works__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title media"
      "body  media";
    align-items: start;
  }

  .banner__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .banner-cup-size__content {
    width: 60%;
    padding-top: 1rem;
    flex-direction: column;
    align-items: start;
  }

  .banner-how-it-works__content {
    flex-direction: column;
    align-items: start;
  }

  .banner__title {
    margin-top: 38px;
  }

  .banner-cup-size__title {
    margin-top: 0;
  }

  .banner__text {
    margin-top: 0;
    width: 100%;
    max-width: 770px;
  }

  .banner-cup-size__text {
    margin-top: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
    max-width: 860px;
  }
  .banner-cup-size__deco {
    left: auto;
    top: auto;
    right: 28%;
    bottom: 3.125rem;
  }

  .banner-cup-size__deco-big {
    right: 5%;
    bottom: 3.125rem;
  }

  .banner-cof-mach-free__deco {
    right: 11%;
    bottom: 1.25rem;
  }

  .banner__title {
    margin-top: 0;
  }

  .banner-how-it-works__deco_star-top {
    right: 40%;
    top: 5%;
  }

  .banner-how-it-works__deco_star-left {
    left: 18%;
    bottom: 8%;
  }

  .banner-how-it-works__deco_star-right {
    right: 23%;
    bottom: 24%;
  }

  .banner-how-it-works__content .btn {
    width: fit-content;
    padding-inline: (0.8125rem, 0.6rem + 1.0625vw, 1.875rem);
  }
  .office-final-cta__wrap {
    grid-template-columns: 1fr 1fr;
  }
}