@import url(lower.css);
@import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css");

.cards {
  display: grid;
  margin-inline: auto;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, min(80%, 330px));
  width: min(100%, 800px);
  gap: 5vw;
  li {
    background-color: var(--bg-light-c);
    border-radius: 10px;
    padding: max(2.4vw, 1.6em);
    flex: 1;
    container-type: inline-size;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.4em;
  }

  span {
    background: linear-gradient(135deg, var(--primary-c), #333) text;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 28cqi;
    margin-bottom: 4cqi;
  }
  h3 {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--deep-c);
  }
  p {
    line-height: 1.6;
  }
}
.top-lead ~ section:where(:not(.cta))::before {
  background: var(--bg-c);
}

.allowance {
  filter: hue-rotate(-40deg);
  .cards {
    grid-template-columns: repeat(auto-fit, min(80%, 290px));
    width: min(100%, 1400px);
    gap: max(3vw, 1em);
  }
}

.leave {
  filter: hue-rotate(-90deg);
  .cards {
    width: min(100%, 1200px);
    gap: max(4vw, 1em);
  }
}

.gallery {
  .swiper {
    width: 100vw;
    overflow: hidden;
    margin-left: -5vw;
    .swiper-wrapper {
      overflow: visible;
      transition-timing-function: linear !important;
    }
    .swiper-slide {
      aspect-ratio: 8/5;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

@media (width < 660px) {
  .cards {
    li {
      padding: max(2.4vw, 1.6em);
      aspect-ratio: auto;
    }
    span {
      font-size: 20cqi;
      margin-bottom: 0;
    }
  }
}