#gallery{display:flex;flex-direction:column;gap:0.375rem;padding:0.25rem 1rem}
#gallery .row{display:flex;gap:0.375rem}
#gallery .row--main{height:12rem}
#gallery .row--thumbs{height:72px}
#gallery .featured,#gallery .photo,#gallery .thumb,#gallery .more{transition:transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease}
#gallery .featured:hover,#gallery .photo:hover,#gallery .thumb:hover,#gallery .more:hover{box-shadow:var(--shadow-elevated);transform:translateY(-2px);z-index:2}
#gallery .featured{background-color:var(--color-text-main);border-radius:var(--radius-lg);cursor:pointer;flex:1.1;overflow:hidden;position:relative}
#gallery .featured img{height:100%;object-fit:cover;width:100%}
#gallery .video-badge{align-items:center;background-color:var(--color-secondary);border-radius:var(--radius);color:var(--color-surface);display:flex;font-size:0.75rem;font-weight:700;gap:0.125rem;left:0.5rem;letter-spacing:0.05em;padding:0.125rem 0.375rem;position:absolute;text-transform:uppercase;top:0.5rem}
#gallery .video-badge .material-symbols-outlined{font-size:14px}
#gallery .play-btn{align-items:center;display:flex;inset:0;justify-content:center;position:absolute}
#gallery .play-circle{align-items:center;backdrop-filter:blur(4px);background:var(--color-surface-overlay-25);border-radius:50%;display:flex;height:3rem;justify-content:center;transition:background-color 0.15s;width:3rem}
#gallery .play-circle .material-symbols-outlined{color:var(--color-surface);filter:drop-shadow(0 1px 2px rgb(0 0 0 / 0.3));font-size:1.875rem}
#gallery .photo--video{position:relative}
#gallery .photo--video:hover .play-circle{background:var(--color-surface-overlay-40)}
#gallery .photo{background-color:var(--color-border);border-radius:var(--radius-lg);cursor:pointer;flex:1;overflow:hidden}
#gallery .thumb{background-color:var(--color-border);border-radius:var(--radius);cursor:pointer;flex:1;overflow:hidden}
#gallery .photo img,#gallery .thumb img{height:100%;object-fit:cover;width:100%}
#gallery .more{background-color:var(--color-text-main);border-radius:var(--radius);cursor:pointer;flex:1;overflow:hidden;position:relative}
#gallery .more img{height:100%;object-fit:cover;opacity:0.35;transition:opacity 0.15s;width:100%}
#gallery .more:hover img{opacity:0.25}
#gallery .more-overlay{align-items:center;background:rgba(0, 0, 0, 0.5);color:var(--color-surface);display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}
#gallery .more-count{font-size:1.125rem;font-weight:700;line-height:1}
#gallery .more-label{font-size:0.75rem;letter-spacing:0.05em;margin-top:0.125rem;text-transform:uppercase}
#gallery .featured:focus-visible,#gallery .photo:focus-visible,#gallery .thumb:focus-visible,#gallery .more:focus-visible{outline:var(--focus-ring);outline-offset:2px}

@media (min-width: 768px){
#gallery{display:grid;gap:0.5rem;grid-template-areas:"featured photo thumb" "featured photo more";grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2, 14rem);margin-bottom:2rem;padding:0}
#gallery .row{display:contents}
#gallery .featured{border-radius:var(--radius-lg);flex:none;grid-area:featured;height:100%}
#gallery .photo{border-radius:var(--radius-lg);flex:none;grid-area:photo;height:100%}
#gallery .thumb{border-radius:var(--radius-lg);flex:none;grid-area:thumb;height:100%}
#gallery .thumb--mobile-only{display:none}
#gallery .more{align-items:center;border-radius:var(--radius-lg);display:flex;flex:none;grid-area:more;height:100%;justify-content:center;position:relative}
}
@media (min-width: 1280px){
#gallery{grid-template-rows:repeat(2, 15rem)}
}