.suggested-videos {
     max-width: 1100px;
     margin: 2rem auto;
     padding: 0 1rem;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
 }

 .suggested-videos h2 {
     margin-bottom: 0.75rem;
     font-size: 1.5rem;
 }

 .video-row {
     position: relative;
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: 0.5rem;
 }

 .track {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 85%;
     gap: 1rem;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     padding-bottom: 0.5rem;
     scroll-behavior: smooth;
 }

 /* Wider items on larger screens */
 @media (min-width: 640px) {
     .track {
         grid-auto-columns: 55%;
     }
 }

 @media (min-width: 980px) {
     .track {
         grid-auto-columns: 32%;
     }
 }

 /* Hide scrollbar (non-essential) */
 .track::-webkit-scrollbar {
     height: 8px;
 }

 .track::-webkit-scrollbar-thumb {
     background: #cfcfcf;
     border-radius: 4px;
 }

 .track {
     scrollbar-width: thin;
 }

 .item {
     scroll-snap-align: start;
 }

 .video {
     aspect-ratio: 16 / 9;
     /* keeps the iframe 16:9 */
     width: 100%;
     background: #000;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
 }

 .video iframe {
     width: 100%;
     height: 100%;
     border: 0;
     display: block;
 }

 .title {
     font-size: 0.95rem;
     margin: 0.5rem 0 0;
     line-height: 1.3;
 }

 .nav {
     inline-size: 2.25rem;
     block-size: 2.25rem;
     border: none;
     border-radius: 999px;
     background: #fff;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
     cursor: pointer;
     font-size: 1.25rem;
     line-height: 1;
     display: grid;
     place-items: center;
 }

 .nav:focus-visible {
     outline: 2px solid #2563eb;
     outline-offset: 2px;
 }