.highlights__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } @media (min-width: 750px) { .highlights__grid { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.highlights__link { position: relative; display: block; aspect-ratio: 1; background: var(--bg, #f0f0f0); overflow: hidden; } .highlights__link img { width: 100%; height: 100%; object-fit: cover; }
.highlights__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: #fff; text-transform: uppercase; letter-spacing: var(--ls-nav); }
@media (max-width: 749px) { .highlights { --pt: 30px; --pb: 30px; } }