.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1px;
    grid-auto-flow: row dense;
    align-items: start;
    column-gap: 1.2rem;
    row-gap: 0;
    margin: 1.25rem 0 2rem;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 1025px) {
    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gallery-section {
    scroll-margin-top: 8rem;
    margin-bottom: 1.5rem;
}

#photography .gallery-details {
    --gallery-preview-height: 352px;
    position: relative;
    max-height: var(--gallery-preview-height);
    overflow: hidden;
    overflow-anchor: none;
    transition: max-height 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

#photography .gallery-details::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 6rem;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.95));
    content: "";
    opacity: 1;
    pointer-events: none;
    transition: opacity 350ms ease-out;
}

#photography .gallery-section.is-expanded .gallery-details {
    max-height: none;
}

#photography .gallery-section.is-expanded .gallery-details::after {
    opacity: 0;
}

#photography .gallery-section:not(.is-expanded) .gallery-read-more {
    z-index: 1;
    margin-top: -3.5rem;
    margin-bottom: 0.5rem;
}

#photography .gallery-section.is-expanded .project-arrow {
    transform: translate(-50%, calc(-50% - 2px)) rotate(180deg);
}

@media (max-width: 480px) {
    #photography .gallery-read-more {
        width: 2.75rem;
        height: 2.75rem;
        touch-action: manipulation;
    }
}

#photography .gallery-grid a {
    display: block;
    align-self: start;
    min-width: 0;
    text-decoration: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

#photography .gallery-grid a:hover {
    transform: scale(1.04);
    filter: brightness(1.08);
}

#photography .gallery-grid a:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 4px;
}

#photography .image-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

#photography .image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    #photography .gallery-grid a,
    #photography .gallery-details,
    #photography .gallery-details::after {
        transition: none;
    }

    #photography .gallery-grid a:hover {
        transform: none;
    }
}