html:focus-within {
  scroll-behavior: smooth;
}

:root {
  --font-size-large: 60px;
}

@media only screen and (max-width: 1023px) {
  :root {
    --font-size-large: 40px;
  }
}

/*  _                    _            */
/* | |__   ___  __ _  __| | ___ _ __  */
/* | '_ \ / _ \/ _` |/ _` |/ _ \ '__| */
/* | | | |  __/ (_| | (_| |  __/ |    */
/* |_| |_|\___|\__,_|\__,_|\___|_|    */
.content-page-header {
  --background-offset: 120px;
  --content-padding: 100px;
  --content-gap: 50px;

  background: linear-gradient(
    180deg,
    #ddd calc(100% - var(--background-offset)),
    transparent calc(100% - var(--background-offset) + 1px)
  );
  position: relative;
}

.content-page-header__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);
  padding-top: var(--content-padding);
}

.content-page-header__text {
  font-size: 25px;
  line-height: 1.6;
  font-weight: 800;
}

.content-page-header__image {
  position: static;
  z-index: 1;
}

.content-page-header__image img {
  border-radius: 40px;
  object-fit: cover;
}

.content-page-header__scroll {
  margin-top: calc(var(--content-padding) * 2 - var(--content-gap));
  color: #000;
  font-size: 16px;
}

.content-page-header__shape {
  position: absolute;
  right: 0;
  bottom: var(--background-offset);
  translate: 0 50%;
}

.content-page-header__shape svg {
  margin: 0;
  display: block;
}

/* >= tablet */
@media only screen and (min-width: 1024px) {
  .content-page-header__image img {
    min-height: 100%;
  }
}

/* < tablet */
@media only screen and (max-width: 1023px) {
  .content-page-header h1 {
    font-size: 60px;
    line-height: 0.75;
  }

  .content-page-header__shape {
    display: none;
  }

  .content-page-header__row {
    display: flex;
    flex-direction: column-reverse;
  }

  .content-page-header__scroll {
    display: none;
  }

  .content-page-header {
    background: #ddd;
    padding-bottom: var(--content-padding);
  }
}

/*                    _        */
/*   __ _ _   _  ___ | |_ ___  */
/*  / _` | | | |/ _ \| __/ _ \ */
/* | (_| | |_| | (_) | ||  __/ */
/*  \__, |\__,_|\___/ \__\___| */
/*     |_|                     */
.content-page-quote {
  --content-padding: 150px;

  padding-top: var(--content-padding);
  padding-bottom: var(--content-padding);
}

.content-page-quote__container {
  margin: 0 auto;
  max-width: 946px;
  text-align: center;
}

.content-page-quote__quote {
  font-size: var(--font-size-large);
  line-height: 0.75;
  font-weight: 800;
}

.content-page-quote__subtitle {
  font-size: 20px;
  line-height: 1.75;
  margin-top: 25px;
}

/* < tablet */
@media only screen and (max-width: 1023px) {
  .content-page-quote__quote {
    font-size: 40px;
  }
}

/*        _     _             */
/* __   _(_) __| | ___  ___   */
/* \ \ / / |/ _` |/ _ \/ _ \  */
/*  \ V /| | (_| |  __/ (_) | */
/*   \_/ |_|\__,_|\___|\___/  */
.content-page-video {
}

.content-page-video__image {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.content-page-video__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
}

.content-page-video__content {
  border-radius: 40px;
  background: #009BE5;
  padding: 75px;
}

.content-page-video__text {
  font-size: 20px;
  line-height: 1.75;
}

.content-page-video__text :is(h2, h3, h4, h5, h6) {
  font-size: var(--font-size-large);
  font-weight: 800;
  line-height: 75%;
  margin-bottom: 40px;
}

.content-page-video__text + * {
  margin-top: 40px;
}

@media only screen and (max-width: 1023px) {
  .content-page-video__content {
    padding: 40px;
  }
}

/*                  _             _    */
/*   ___ ___  _ __ | |_ ___ _ __ | |_  */
/*  / __/ _ \| '_ \| __/ _ \ '_ \| __| */
/* | (_| (_) | | | | ||  __/ | | | |_  */
/*  \___\___/|_| |_|\__\___|_| |_|\__| */
.content-page-content {
  --content-padding: 150px;
  --content-gap: 40px;

  text-align: center;
  background: linear-gradient(180deg, transparent 50%, #ddd calc(50% + 1px));
}

.content-page-content .row {
  padding-top: var(--content-padding);
  padding-bottom: var(--content-padding);
  border-radius: 40px;
  background: #fff;
}

.content-page-content__content {
  max-width: 946px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
}

.content-page-content__iframe {
  max-width: 804px;
  width: 100%;
}

.content-page-content__iframe iframe {
  width: 100%;
}

.content-page-content__title {
  font-size: var(--font-size-large);
  line-height: 0.75;
  font-weight: 800;
}

.content-page-content__text {
  font-size: 20px;
  line-height: 1.75;
}

/*      _ _     _            */
/*  ___| (_) __| | ___ _ __  */
/* / __| | |/ _` |/ _ \ '__| */
/* \__ \ | | (_| |  __/ |    */
/* |___/_|_|\__,_|\___|_|    */
.content-page-slider {
  --button-size: 50px;
  --content-padding: 150px;

  overflow: hidden;
  padding-top: var(--content-padding);
  padding-bottom: var(--content-padding);
  margin-bottom: var(--content-padding);
  background: #ddd;
}

.content-page-slider__title {
  font-size: var(--font-size-large);
  font-weight: 800;
  line-height: 0.75;
}

.content-page-slider .swiper {
  --swiper-scrollbar-size: 10px;
  --swiper-scrollbar-drag-bg-color: #009BE5;
  --swiper-scrollbar-top: 0;

  overflow: visible;
  margin-top: 50px;
}

.content-page-slider__button-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.content-page-slider .swiper-slide img {
  border-radius: 40px;
  aspect-ratio: 1;
  object-fit: cover;
}

.content-page-slider .swiper-nav {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 25px;
  align-items: center;
  margin-top: 30px;
}

.content-page-slider .swiper-nav :is(.swiper-button-prev, .swiper-button-next) {
  width: var(--button-size);
  height: var(--button-size);
  position: static;
  left: unset;
  right: unset;
  top: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #fff;
  border-radius: 899px;
}

.content-page-slider .swiper-nav .swiper-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.content-page-slider .swiper-nav .swiper-scrollbar-container {
  position: relative;
  height: var(--swiper-scrollbar-size, 4px);
}

.content-page-slider
  .swiper-nav
  :is(.swiper-button-prev, .swiper-button-next)
  svg {
  width: 14px;
  height: auto;
}

.content-page-slider
  .swiper-nav
  :is(.swiper-button-prev, .swiper-button-next)::after {
  content: "";
}

@media only screen and (max-width: 1023px) {
  .content-page-slider__button-container {
    margin-top: 20px;
    justify-content: flex-start;
  }
}