.how-to-pay-page__hero.gradient-hero--height-slider {
  height: auto;
  min-height: clamp(39.25rem, calc(166.667vw + 4.25rem), 52.25rem);
}

@media (min-width: 600px) {
  .how-to-pay-page__hero.gradient-hero--height-slider {
    height: auto;
    min-height: clamp(33rem, calc(26.16rem + 12.92vw), 53.5rem);
  }
}

@media (min-width: 900px) and (max-width: 1299px) and (hover: hover) and (pointer: fine) {
  .how-to-pay-page__hero.gradient-hero--height-slider {
    min-height: 35rem;
  }
}

@media (min-width: 1200px) {
  .how-to-pay-page__hero.gradient-hero--height-slider {
    height: auto;
    min-height: clamp(38rem, calc(38.46vw + 8rem), 53.5rem);
    max-height: none;
  }
}

@media (min-width: 900px) {
  .how-to-pay-page__hero .gradient-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.how-to-pay-page__faq {
  padding-top: clamp(4rem, 8vw, 7rem);
  background-color: var(--color-surface-subtle);
}

.how-to-pay-page__faq-media {
  width: min(
    calc(100% - var(--layout-page-gutter) - var(--layout-page-gutter)),
    var(--layout-content-max-width)
  );
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  overflow: hidden;
  border-radius: min(5vw, 1.5rem);
  background-color: var(--color-surface-media);
}

@media (min-width: 600px) {
  .how-to-pay-page__faq-media {
    aspect-ratio: 16 / 7;
  }
}

@media (min-width: 900px) {
  .how-to-pay-page__faq-media {
    aspect-ratio: 16 / 6;
  }
}

.how-to-pay-page__faq-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.how-to-pay-page__faq .solutions-faq {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}