.gallery-grid { margin: 0; } .gallery-tile-link { display: block; border-radius: 8px; text-decoration: none; color: inherit; } .gallery-tile-link:focus-visible { outline: 2px solid var(--color-canon-red-alt, #e22128); outline-offset: 2px; } .gallery-tile { position: relative; margin: 0; aspect-ratio: 376 / 379; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } .gallery-tile-link:hover .gallery-tile, .gallery-tile-link:focus-visible .gallery-tile { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .gallery-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .gallery-tile-link:hover .gallery-tile__img, .gallery-tile-link:focus-visible .gallery-tile__img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .gallery-tile, .gallery-tile__img { transition: none; } .gallery-tile-link:hover .gallery-tile, .gallery-tile-link:focus-visible .gallery-tile, .gallery-tile-link:hover .gallery-tile__img, .gallery-tile-link:focus-visible .gallery-tile__img { transform: none; } } .gallery-tile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%); } .gallery-tile__bottom { position: absolute; inset: auto 0 0 0; gap: 0.5rem; padding: 0.75rem; color: #fff; } .gallery-tile__caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } .gallery-tile__stats { flex-shrink: 0; gap: 0.5rem; font-size: 0.55rem; font-weight: 700; line-height: 1.1; } .gallery-tile__stats i { font-size: 0.95rem; }