.stories { --section-content-width:1152px; background:#fff; color:#1a2128; color-scheme:light; padding:188px 0 260px; scroll-margin-top:calc(var(--header-height) + 24px); }
.stories__header { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:38px; }
.stories h2 { margin:0; font-size:40px; font-weight:700; line-height:50px; }
.stories__more { display:inline-flex; align-items:center; gap:4px; flex:none; min-height:44px; color:#0099e8; font-size:17px; line-height:25.5px; font-weight:600; text-decoration:none; white-space:nowrap; transition:opacity 180ms ease; }
.stories__more img { width:20px; height:20px; flex:none; transition:transform 240ms ease; }
.stories__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:32px; margin:0; padding:0; list-style:none; }
.stories__card { min-width:0; }
.stories__content { display:block; color:inherit; text-decoration:none; border-radius:24px; }
.stories__media { position:relative; display:block; aspect-ratio:373 / 306; overflow:hidden; border-radius:24px; background:#eff2f2; }
.stories__media img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 600ms cubic-bezier(.22,1,.36,1); }
.stories__title { margin:24px 0 0; color:#1a1712; font-family:inherit; font-size:20px; line-height:28px; font-weight:700; font-style:normal; letter-spacing:0; word-break:keep-all; overflow-wrap:anywhere; }
.stories :focus-visible { outline:2px solid #00afff; outline-offset:6px; }
@media (hover:hover) {
  .stories__content:hover .stories__media img { transform:scale(1.04); }
  .stories__more:hover { opacity:.8; }
  .stories__more:hover img { transform:translateX(3px); }
}
@media (max-width:1200px) { .stories__grid { gap:24px; } }
@media (max-width:900px) {
  .stories { padding:100px 0 200px; }
  .stories__header { flex-direction:row; flex-wrap:nowrap; align-items:center; gap:12px; margin-bottom:28px; }
  .stories h2 { font-size:32px; line-height:42px; white-space:nowrap; }
  .stories__grid { gap:16px; }
  .stories__title { margin-top:14px; font-size:16px; line-height:24px; }
}
@media (max-width:600px) {
  .stories__grid { grid-template-columns:1fr; gap:40px; }
  .stories__title { margin-top:18px; font-size:18px; line-height:27px; }
}
@media (max-width:480px) {
  .stories__header { gap:8px; }
  .stories h2 { font-size:clamp(24px,7.5vw,30px); line-height:40px; }
  .stories__more { font-size:14px; line-height:21px; }
  .stories__media { border-radius:20px; }
}
@media (prefers-reduced-motion:reduce) { .stories__media img,.stories__more,.stories__more img { transition:none; }.stories__content:hover .stories__media img,.stories__more:hover img { transform:none; } }