:root {
  --color-primary: #d8ff85;
  --color-slider-surface: #0a211f;
  --color-offwhite: #FAFAFA;
  --color-body-bg: #e6ecd6;
  --color-title: #FFFFFF;
  --color-text: var(--color-body-bg);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  color: var(--color-text);
  background-color: var(--color-body-bg);
  padding-block: 5vh;
}

img {
  display: block;
  max-width: 100%;
}

.swiper {
  width: 100%;
}

/* Slider Container Styles */
.slider {
  --_thumbnail-slider-offset: 22px;
  padding-inline: 20px;
  background-color: var(--color-slider-surface);
  overflow: hidden;
  padding-block: var(--_thumbnail-slider-offset);
}
.slider_grid {
  display: grid;
  max-width: 1248px;
  margin-inline: auto;
}
@media screen and (max-width: 1099.98px) {
  .slider_grid {
    gap: 1.875rem;
  }
}
@media screen and (min-width: 1100px) {
  .slider_grid {
    grid-template-columns: 22.836538461% 72.676282051% 4.487179487%;
  }
}

/* Thumbnail Card Styles */
.thumbnail-card {
  overflow: hidden;
  height: 100%;
}
@media screen and (max-width: 1099.98px) {
  .thumbnail-card {
    border-radius: 50%;
  }
}
.thumbnail-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Thumbnail Slider Styles */
@media screen and (max-width: 1099.98px) {
  .thumbnail-slider {
    max-width: 690px;
  }
}
@media screen and (min-width: 1100px) {
  .thumbnail-slider {
    height: clamp(37.5rem, 4.9449rem + 47.3529vw, 47.5625rem);
    overflow: visible;
  }
}
.thumbnail-slider .swiper-slide {
  --_active-progress: 1;
  opacity: calc(1 - 0.6 * var(--_active-progress));
}
@media screen and (max-width: 1099.98px) {
  .thumbnail-slider .swiper-slide {
    padding: calc(clamp(0.75rem, 0.6207rem + 0.5517vw, 1rem) * var(--_active-progress));
    aspect-ratio: 1/1;
  }
}
@media screen and (min-width: 1100px) {
  .thumbnail-slider .swiper-slide {
    padding: calc(1.25rem * var(--_active-progress)) calc(2.25rem * var(--_active-progress));
  }
  .thumbnail-slider .swiper-slide .thumbnail-card {
    transform: translateY(var(--_y-offset, 0px));
    border-radius: calc(clamp(0.75rem, 0.3099rem + 1.8779vw, 2rem) + clamp(0.25rem, -0.5588rem + 1.1765vw, 0.5rem) * (1 - var(--_active-progress)));
  }
}

/* Card Styles */
@media screen and (max-width: 1099.98px) {
  .card {
    display: grid;
    justify-items: center;
    text-align: center;
  }
}
@media screen and (min-width: 1100px) {
  .card {
    margin-left: clamp(2.1875rem, -5.2941rem + 10.8824vw, 4.5rem);
    margin-right: clamp(2.1875rem, -1.0478rem + 4.7059vw, 3.1875rem);
  }
}
.card_logo {
  color: var(--color-primary);
  font-size: clamp(1.125rem, 0.9049rem + 0.939vw, 1.75rem);
  font-weight: 700;
}
.card_description {
  font-size: clamp(1.25rem, 1.056rem + 0.8276vw, 1.625rem);
  margin-block: clamp(1.625rem, 0.9648rem + 2.8169vw, 3.5rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
@media screen and (max-width: 1099.98px) {
  .card_description {
    max-width: 40ch;
  }
}
@media screen and (min-width: 1100px) {
  .card_description {
    font-size: clamp(1.875rem, -0.1471rem + 2.9412vw, 2.5rem);
  }
}
.card_title {
  color: var(--color-title);
  font-size: clamp(1.125rem, 0.8169rem + 1.3146vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.card_role {
  font-size: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Preview Slider Styles */
.preview-slider .swiper-wrapper {
  display: grid;
}
.preview-slider .swiper-wrapper > * {
  grid-area: 1/-1;
  width: unset !important;
}
.preview-slider .swiper-slide {
  display: grid;
  align-items: center;
  transition: opacity 0.35s linear;
  background-color: var(--color-slider-surface);
}
.preview-slider .swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
  pointer-events: none;
}

/* Slider Navigation Styles */
.slider-navigation {
  display: grid;
  gap: 12px;
  align-content: center;
}
@media screen and (max-width: 1099.98px) {
  .slider-navigation {
    grid-auto-flow: column;
    justify-content: center;
  }
}
@media screen and (min-width: 1100px) {
  .slider-navigation {
    width: 100%;
  }
}
.slider-navigation_arrow {
  width: 46px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  color: var(--color-primary);
  background-color: transparent;
  border: 1px solid var(--color-primary);
  outline: 0;
}
@media screen and (min-width: 1100px) {
  .slider-navigation_arrow {
    width: 100%;
  }
}
.slider-navigation_arrow:not(:disabled) {
  cursor: pointer;
}
.slider-navigation_arrow:focus-visible, .slider-navigation_arrow:active {
  color: var(--color-slider-surface);
  background-color: var(--color-primary);
}
@media screen and (max-width: 1099.98px) {
  .slider-navigation_arrow.cc-left, .slider-navigation_arrow.cc-right {
    transform: rotate(-90deg);
  }
}/*# sourceMappingURL=style.css.map */