/* ==========================================================================
   Banerjeeoli's (pId 67477) — gallery page (core_views/banerjeeolis/gallery.php)
   Auto-loaded by base.php as per-page brand CSS (basename "gallery"), after
   the brand-wide 67477.css — so .title / .space-top / .common-spacing come
   from there and only the grid + tile rules live here.
   ========================================================================== */

.brand-gallery-page .container {
    max-width: 1140px;
}

.brand-gallery-page__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Tile is a button so it is keyboard/focus reachable — strip button chrome. */
.brand-gallery-page__tile {
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    display: block;
    transition: transform .2s ease, box-shadow .2s ease;
}

.brand-gallery-page__tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

.brand-gallery-page__tile:focus-visible {
    outline: 2px solid var(--brand-primary, #c73327);
    outline-offset: 2px;
}

.brand-gallery-page__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .brand-gallery-page__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
    .brand-gallery-page__grid { grid-template-columns: 1fr; }
}