@charset "UTF-8";

.features {
  --features-card-w: min(202px, 62vw);

  background-color: var(--c-bg-inverse);
  color: var(--c-text-inverse);
  padding-block: var(--s-64);
}

.features::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    72% 40% at 50% 22%,
    var(--c-michelin-blue),
    transparent 70%
  );
  opacity: 0.9;
  pointer-events: none;
}

.features__intro,
.features__track {
  position: relative;
}

.features__mascot {
  width: min(134px, 41%);
  margin-inline: auto;
  aspect-ratio: 194.163 / 142;
  overflow: hidden;
}

.features__mascot img {
  width: 68.55%;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(180deg, black 17%, transparent 47%);
  mask-image: linear-gradient(180deg, black 17%, transparent 47%);
}

.features__header {
  margin-top: var(--s-4);
  text-align: center;
}

.features__title {
  font-size: 30px;
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
}

.features__subtitle {
  margin-top: var(--s-8);
  color: var(--c-text-inverse-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.features__track {
  margin-top: var(--s-32);
  gap: var(--s-12);
  align-items: center;

  padding-inline: clamp(
    var(--gutter),
    calc((100% - var(--features-card-w)) / 2),
    96px
  );
  padding-block: var(--s-16);
}

.features__track > .features__card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--features-card-w);
  aspect-ratio: 178.4 / 228;
  background-color: var(--c-card-surface-active);
  overflow: hidden;

  container-type: inline-size;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.features__art {
  height: auto;
}

.features__art--safety { width: 58.3cqw; }
.features__art--test   { width: 93.64cqw; }
.features__art--award  { width: 45.4cqw; }

.features__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.32cqw;
  width: 100%;
  text-align: center;
}

.features__line {
  font-size: 7.74cqw;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.features__line-sm {
  font-size: 5.4cqw;
}

.features__art--badge {
  width: 30.87cqw;
}

.features__art--rating {
  position: relative;
  width: 88.35cqw;

  container-type: inline-size;
}

.features__art--rating img {
  width: 100%;
  height: auto;
}

.features__rating-num {
  position: absolute;
  left: 79.05%;
  top: 57.8%;
  font-family: var(--ff-display);
  font-size: 13.94cqw;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--c-text-inverse);
}

@media (min-width: 1024px) {
  .features {
    padding-block: var(--s-80) var(--s-96);
  }

  .features::before {
    background-image: radial-gradient(
      42% 34% at 50% 20%,
      var(--c-michelin-blue),
      transparent 72%
    );
  }

  .features__mascot {
    width: min(194px, 24%);
  }

  .features__header {
    margin-top: 0;
  }

  .features__title {
    font-size: 38px;
  }

  .features__subtitle {
    margin-top: var(--s-12);
    font-size: var(--fs-body);
  }

  .features__track {
    max-width: calc(948px + var(--gutter) * 2);
    margin-inline: auto;
    margin-top: var(--s-48);
    gap: var(--s-12);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: var(--gutter);
    padding-block: 0;
  }

  .features__track > .features__card {
    flex: 1 1 0;
    min-width: 0;
    transform: none;
    opacity: 1;
  }
}