/**** GALLERY INTRO ****//**** GALLERY INTRO ****//**** GALLERY INTRO ****/

#gallery-intro {background-color: var(--color-bg-primary);}
#gallery-intro .lead {max-width: 62ch;}

/**** PHOTO GRID ****//**** PHOTO GRID ****//**** PHOTO GRID ****/

#gallery-grid {background-color: var(--color-bg-light);}
#gallery-grid .photos {display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr));}
#gallery-grid .photo {min-width: 0px;}
.photo-button {display: block; width: 100%; padding: 0px; cursor: zoom-in; background-color: var(--color-transparent); border: 0px;}
.photo-button img {transition: transform var(--transition-base);}
.photo-button:hover img {transform: scale(1.02);}
.photo-button:focus-visible {outline-offset: calc(0px - var(--space-3xs));}

/**** GALLERY NEXT ****//**** GALLERY NEXT ****//**** GALLERY NEXT ****/

#gallery-next {background-color: var(--color-bg-secondary);}
#gallery-next .container {padding-top: var(--space-lg); padding-bottom: var(--space-lg); background-color: var(--color-bg-light); border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);}

/**** MEDIA 1350 ****//**** MEDIA 1350 ****//**** MEDIA 1350 ****/

@media (max-width: 1350px) {
    #gallery-grid .photos {grid-template-columns: repeat(3, minmax(0px, 1fr));}
}

/**** MEDIA 750 ****//**** MEDIA 750 ****//**** MEDIA 750 ****/

@media (max-width: 750px) {
    #gallery-grid .photos {grid-template-columns: repeat(2, minmax(0px, 1fr));}
}

/**** MEDIA 500 ****//**** MEDIA 500 ****//**** MEDIA 500 ****/

@media (max-width: 500px) {
    #gallery-grid .photos {grid-template-columns: 1fr;}
    #gallery-next .container {padding-top: var(--space-md); padding-bottom: var(--space-md); border-radius: var(--radius-md);}
}