@property --glint-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: -120deg;
}

:root {
  color-scheme: light;
  --page-bg: #ffffff;
  --text: #101b54;
  --blue: #075ee8;
  --red: #ed2e4f;
  --gap: clamp(6px, 0.72vw, 12px);
  --radius: clamp(14px, 1.35vw, 22px);
  --page-padding: clamp(8px, 0.9vw, 15px);
  --shadow-rest: 0 1px 8px rgb(18 61 132 / 8%);
  --shadow-hover: 0 16px 34px rgb(12 48 118 / 18%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--page-bg);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--page-bg);
  color: var(--text);
  font-family: "Avenir Next", Avenir, Inter, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.page-shell {
  width: 100%;
  padding: var(--page-padding) var(--page-padding) 18px;
}

.mosaic {
  width: min(100%, 1644px);
  margin-inline: auto;
  display: grid;
  gap: var(--gap);
}

.mosaic-row {
  display: grid;
  gap: var(--gap);
  min-width: 0;
}

.mosaic-row--top {
  grid-template-columns: 367fr 892fr 367fr;
}

.mosaic-row--middle {
  grid-template-columns: 324fr 343fr 321fr 367fr 309fr;
}

.mosaic-row--bottom {
  grid-template-columns: 338fr 337fr 343fr 587fr;
}

.tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: #eef5ff;
  box-shadow: var(--shadow-rest);
  transform: translateZ(0);
  transition:
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 360ms ease;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mosaic-row--top .tile {
  aspect-ratio: 367 / 354;
}

.mosaic-row--top .tile--hero {
  aspect-ratio: 892 / 354;
}

.tile--product {
  container-type: inline-size;
}

.tile--product::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(248 251 255 / 100%) 0%,
    rgb(248 251 255 / 100%) 86%,
    rgb(248 251 255 / 0%) 100%
  );
}

.tile-product-copy {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 1.05vw, 18px);
  left: clamp(18px, 1.55vw, 26px);
  color: #0637ae;
  line-height: 0.96;
  letter-spacing: -0.035em;
  pointer-events: none;
}

.tile-product-copy p {
  margin: 0;
  white-space: nowrap;
}

.tile-product-model {
  font-size: clamp(21px, 1.55vw, 26px);
  font-weight: 400;
}

.tile-product-model strong {
  font-weight: 600;
}

.tile-product-model span {
  font-size: 0.86em;
  font-weight: 400;
}

.tile-product-price {
  margin-top: clamp(5px, 0.42vw, 7px) !important;
  color: #075ee8;
  font-size: clamp(21.5px, 1.58vw, 26.5px);
  font-weight: 500;
}

.tile-product-price strong {
  font-size: 1.68em;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.tile-product-price span {
  margin-left: 0.08em;
  font-weight: 500;
}

.mosaic-row--middle .tile:nth-child(1) {
  aspect-ratio: 324 / 273;
}

.mosaic-row--middle .tile:nth-child(2) {
  aspect-ratio: 343 / 273;
}

.mosaic-row--middle .tile:nth-child(3) {
  aspect-ratio: 321 / 273;
}

.mosaic-row--middle .tile:nth-child(4) {
  aspect-ratio: 367 / 273;
}

.mosaic-row--middle .tile:nth-child(5) {
  aspect-ratio: 309 / 273;
}

.mosaic-row--bottom .tile:nth-child(1) {
  aspect-ratio: 338 / 267;
}

.mosaic-row--bottom .tile:nth-child(2) {
  aspect-ratio: 337 / 267;
}

.mosaic-row--bottom .tile:nth-child(3) {
  aspect-ratio: 343 / 267;
}

.mosaic-row--bottom .tile:nth-child(4) {
  aspect-ratio: 587 / 267;
}

.tile--fit-product {
  background: linear-gradient(135deg, #f8fbff 0%, #edf4fc 58%, #e5eef9 100%);
}

.tile--fit-product img {
  object-fit: contain;
  object-position: center;
}

.tile--fit-product:hover img {
  transform: none;
}

.tile::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--glint-angle),
    transparent 0deg 285deg,
    rgb(255 255 255 / 18%) 302deg,
    rgb(255 255 255 / 100%) 315deg,
    rgb(31 118 255 / 96%) 326deg,
    rgb(238 42 76 / 90%) 337deg,
    transparent 355deg
  );
  opacity: 0;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.tile:hover {
  z-index: 2;
  transform: translateY(-3px) scale(1.008);
  box-shadow: var(--shadow-hover);
  filter: saturate(1.025) contrast(1.015);
}

.tile:hover img {
  transform: scale(1.012);
}

.tile:hover::before {
  opacity: 1;
  animation: edge-glint 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-footer {
  width: min(100%, 1644px);
  margin: 11px auto 0;
  padding-inline: 4px;
  color: #40517e;
  font-size: clamp(0.78rem, 0.76vw, 0.88rem);
  font-weight: 400;
  letter-spacing: 0.025em;
  text-align: right;
}

.page-footer p {
  margin: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes edge-glint {
  0% {
    --glint-angle: -120deg;
  }
  100% {
    --glint-angle: 240deg;
  }
}

@media (max-width: 960px) {
  :root {
    --gap: 10px;
    --radius: 20px;
    --page-padding: 12px;
  }

  .mosaic-row--top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile--hero {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .mosaic-row--middle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile--middle-last {
    grid-column: 1 / -1;
    width: calc(50% - var(--gap) / 2);
    justify-self: center;
  }

  .mosaic-row--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile--promo {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  :root {
    --gap: 9px;
    --radius: 18px;
    --page-padding: 9px;
  }

  .mosaic-row--top,
  .mosaic-row--middle,
  .mosaic-row--bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile--hero,
  .tile--middle-last,
  .tile--promo {
    grid-column: auto;
    width: 100%;
  }

  .tile--hero {
    grid-row: 1;
  }

  .tile--hero img {
    width: 100%;
    height: clamp(210px, 61vw, 238px);
    object-fit: cover;
    object-position: 48% center;
  }

  .page-footer {
    margin-top: 12px;
    padding-inline: 3px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .tile img {
    transition: none;
  }

  .tile:hover {
    transform: none;
  }

  .tile:hover img {
    transform: none;
  }

  .tile:hover::before {
    animation: none;
    background: linear-gradient(110deg, var(--blue), #fff 50%, var(--red));
  }
}