.hp-section {
  min-height: 75vh;
  background-color: transparent;
  color: #FFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  --wave-height: calc(10vw + 5vh);
  padding-top: calc(var(--wave-height) + 2rem) !important;
  padding-bottom: var(--wave-height) !important;
}

.hp-section.with-waves {
  background-image: url('/static/web/waves%401x.jpg');
  background-image: image-set(
          url('/static/web/waves.webp') 1x,
          url('/static/web/waves%402x.webp') 2x);
  background-image: -webkit-image-set(
          url('/static/web/waves.webp') 1x,
          url('/static/web/waves%402x.webp') 2x);
  background-repeat: repeat-x;
  background-position: top;
  background-size: auto var(--wave-height);
  padding-top: calc(var(--wave-height) + 2rem);
}

.hp-section.with-waves-deep {
  background-image: url('/static/web/waves-deep%401x.jpg');
  background-image: image-set(
          url('/static/web/waves-deep.webp') 1x,
          url('/static/web/waves-deep%402x.webp') 2x);
  background-image: -webkit-image-set(
          url('/static/web/waves-deep.webp') 1x,
          url('/static/web/waves-deep%402x.webp') 2x);
  background-repeat: repeat-x;
  background-position: top;
  background-size: auto var(--wave-height);
  padding-top: calc(var(--wave-height) + 2rem);
}

.hp-section.with-white-waves + .hp-section.with-waves-deep {
  --half-wave-height: calc(var(--wave-height) / 2);
  background-image: url('/static/web/waves-deep%401x.jpg'),
      linear-gradient(to bottom, #FFF 0%, #FFF var(--half-wave-height), transparent var(--half-wave-height), transparent 100%);
  background-image: image-set(
          url('/static/web/waves-deep.webp') 1x,
          url('/static/web/waves-deep%402x.webp') 2x),
      linear-gradient(to bottom, #FFF 0%, #FFF var(--half-wave-height), transparent var(--half-wave-height), transparent 100%);
  background-image: -webkit-image-set(
          url('/static/web/waves-deep.webp') 1x,
          url('/static/web/waves-deep%402x.webp') 2x),
      linear-gradient(to bottom, #FFF var(--half-wave-height), transparent var(--half-wave-height), transparent 100%);

}

.hp-section.with-white-waves {
  background-image: linear-gradient(to bottom, #FFF, #FFF), url('/static/web/white-waves.png');
  background-image: linear-gradient(to bottom, #FFF, #FFF), image-set(
          url('/static/web/white-waves.png') 1x,
          url('/static/web/white-waves%402x.webp') 2x);
  background-image: linear-gradient(to bottom, #FFF, #FFF), -webkit-image-set(
          url('/static/web/white-waves.png') 1x,
          url('/static/web/white-waves%402x.webp') 2x);
  background-repeat: no-repeat, repeat-x;
  background-position: center bottom, center top;
  background-size: 100% 80%, auto 600px;
  @media (width >= 576px) {
    background-size: 100% calc(100% - 80vh), auto calc(80vh);
  }
  color: var(--bs-linda-blue);
}

.hp-section.with-blue-waves {
  background-image: linear-gradient(to bottom, var(--bs-linda-blue), var(--bs-linda-blue)), url('/static/web/blue-waves.png');
  background-image: linear-gradient(to bottom, var(--bs-linda-blue), var(--bs-linda-blue)), image-set(
          url('/static/web/blue-waves.png') 1x,
          url('/static/web/blue-waves%402x.png') 2x);
  background-image: linear-gradient(to bottom, var(--bs-linda-blue), var(--bs-linda-blue)), -webkit-image-set(
          url('/static/web/blue-waves.png') 1x,
          url('/static/web/blue-waves%402x.png') 2x);
  background-repeat: no-repeat, repeat-x;
  background-position: center bottom, center top;
  background-size: 100% 80%, auto 600px;
  @media (width >= 576px) {
    background-size: 100% calc(100% - 80vh), auto calc(80vh);
  }
  color: var(--bs-white);
}

#linda-bubbles {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: -1;
  background-color: var(--bs-linda-blue);
}

.card3d-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 230px));
  gap: 2rem;
  justify-content: center;
}

.card3d-container {
  perspective: 1000px;
  height: 300px;
}

.card3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card3d:focus-within {
  transform: rotateY(180deg);
}

.card3d-front, .card3d-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  background-color: #FFF;
}

.card3d-back {
  transform: rotateY(180deg);
}

.tier-comparison li {
  display: flex;
  gap: .4em;
  align-items: start;
}

.tier-comparison li img {
  margin-top: .3em;
}

.tier-comparison li.disabled {
  color: var(--bs-secondary);
}

@media (max-width: 576px) {
  .header-action.btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-white);
    --bs-btn-color: var(--bs-white);
  }
  .header-action.btn-primary {
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-white);
    --bs-btn-color: var(--bs-linda-blue);
  }
}

#reviews-carousel {
  max-width: 960px;

  .carousel-inner {
    max-width: 640px;
    margin: 0 auto;
  }

  blockquote {
    margin: 0 1rem;
    padding: 2rem 4rem;
    border-radius: var(--bs-border-radius-lg);
    text-align: center;
    color: var(--bs-linda-blue);
    background-color: var(--bs-light);

    p::after {
      font-size: 300%;
      content: "„";
    }
    p::before {
      font-size: 300%;
      content: "“";
    }

    p {
      font-style: italic;
      line-height: 100%;
      min-height: 8em;
    }

    aside {
      font-size: .8em;
    }
  }
}