﻿#gallery {
    padding: 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 300px 300px;
    gap: 2px;
}

.gallery-item {
    overflow: hidden;
    position: relative;
}

    .gallery-item:first-child {
        grid-row: span 2;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.45) brightness(.6);
        transition: filter .5s, transform .6s;
        display: block;
    }

    .gallery-item:hover img {
        filter: saturate(.8) brightness(.85);
        transform: scale(1.05);
    }

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,5,8,.85) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 28px;
}

    .gallery-overlay p {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-style: italic;
        color: var(--white);
        line-height: 1.3;
    }
