@property --differentiator-glow-active {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.product-differentiators-glow {
  position: relative;
  isolation: isolate;
  transition: --differentiator-glow-active 600ms ease;
}

.product-differentiators-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    122.7% 101.9% at 50% -1.9%,
    transparent 60%,
    color-mix(in srgb, var(--differentiator-glow-active) 35%, transparent) 100%
  );
}

component-product-differentiators {
  display: block;
}

.product-differentiators {
  --differentiator-card-width: 315px;
  --differentiator-card-radius: 15px;
  --differentiator-media: 196px;
  --differentiator-scale: 1.3;
  --differentiator-reference-ratio: 0.36;
  --differentiator-max-fill: 87%;
  --differentiator-tint-alpha: 30%;
  --differentiator-lift: 10px;
  --differentiator-bleed: 0px;
  --differentiator-gap: var(--s1);

  --glass-rim: 1px;
  --glass-converge: 10px;
  --glass-depth: 28px;
  --glass-lit: 255, 255, 255;
  --glass-shade: 31, 57, 95;
}

.product-differentiators-track {
  display: grid;
  grid-template-columns: repeat(3, var(--differentiator-card-width));
  gap: var(--differentiator-gap);
  justify-content: center;
  padding-top: calc(var(--differentiator-media) * (var(--differentiator-scale) - 1));
}

@media (pointer: fine) {
  .product-differentiators component-scroll .scroll-track {
    padding-inline: 0;
    margin-inline: 0;
  }
}

.product-differentiators-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding: 0 var(--s1) var(--s2);
  border-radius: var(--differentiator-card-radius);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 var(--glass-rim) rgba(var(--glass-lit), 0.7),
    inset calc(var(--glass-converge) * -1) calc(var(--glass-converge) * -1)
      calc(var(--glass-converge) * 1.4) calc(var(--glass-converge) * -0.8) rgba(var(--glass-lit), 0.36),
    inset calc(var(--glass-depth) * -1) calc(var(--glass-depth) * -1) calc(var(--glass-depth) * 1.2)
      calc(var(--glass-depth) * -0.95) rgba(var(--glass-lit), 0.24),
    inset var(--glass-depth) var(--glass-depth) calc(var(--glass-depth) * 1.5)
      calc(var(--glass-depth) * -0.95) rgba(var(--glass-shade), 0.11);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  transition: background-image 600ms ease;
}

.product-differentiators-card.state--active {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--differentiator-tint-from, transparent) var(--differentiator-tint-alpha), transparent),
    color-mix(in srgb, var(--differentiator-tint-to, transparent) var(--differentiator-tint-alpha), transparent)
  );
}

.product-differentiators-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--differentiator-media);
  margin-inline: 0;
  transition: height 600ms ease, margin 600ms ease, transform 600ms ease;
}

.product-differentiators-media > img {
  width: auto;
  max-width: 100%;
  height: min(var(--differentiator-max-fill), calc(100% * sqrt(var(--differentiator-reference-ratio) / var(--media-ratio))));
  object-fit: contain;
  object-position: center bottom;
}

.product-differentiators-card.state--active .product-differentiators-media {
  height: calc(var(--differentiator-media) * var(--differentiator-scale));
  margin-top: calc(var(--differentiator-media) * (1 - var(--differentiator-scale)));
  margin-inline: calc(var(--differentiator-bleed) * -1);
  transform: translateY(calc(var(--differentiator-lift) * -1));
}

.product-differentiators-body {
  min-width: 0;
  width: 100%;
}

.product-differentiators-rule {
  width: 100%;
  height: 0;
  margin-inline: 0;
  border: 0;
  border-top: 1px solid var(--color-1);
  opacity: 0.2;
}

.product-differentiators-description {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.product-differentiators-benefits {
  padding-left: 0;
}

.product-differentiators-benefit-icon {
  font-size: 38px;
  line-height: 1;
}

.product-differentiators .text-upper {
  letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  .product-differentiators {
    --differentiator-card-width: 230px;
    --differentiator-media: 196px;
    --differentiator-bleed: 54px;
    --differentiator-gap: var(--s0);
  }

  .product-differentiators h2 {
    max-width: 200px;
    margin-inline: auto;
  }

  .product-differentiators-track {
    column-gap: 12px;
    justify-content: start;
  }

  .product-differentiators-card {
    padding: 0 15px 15px;
  }

  .product-differentiators-benefits {
    gap: 16px;
    margin-top: 15px;
  }

  .product-differentiators-body > * + * {
    margin-top: 15px;
  }

  .product-differentiators-benefit-icon {
    font-size: 28px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .product-differentiators-card,
  .product-differentiators-media {
    transition: none;
  }
}