.gallery {
    padding: calc(var(--spacing-xxl) * 1) 0 var(--spacing-xxl);
    position: relative;
    overflow: hidden;
}

/* .gallery::before {
    content: url('data:image/svg+xml,<svg width="1920" height="141" viewBox="0 0 1920 141" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-1.09283e-05 -7.61675e-06L1920 -0.000190735L0.00012207 110L-1.09283e-05 -7.61675e-06Z" fill="%234CB480"/><path d="M1920 -2.28755e-05L1.4008e-05 -0.000198364L1920 141L1920 -2.28755e-05Z" fill="%234CB480" fill-opacity="0.17"/><path d="M1920 1.2642e-08L8.34522e-06 -0.000190735L1920 84.0002L1920 1.2642e-08Z" fill="%234CB480" fill-opacity="0.17"/></svg>');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.gallery::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1098" height="2491" viewBox="0 0 1098 2491" fill="none"><path d="M2275.42 0.353598L0.353701 2275.42M559.54 891.743L1644.6 1976.8M2489.67 214.607L214.607 2489.67" stroke="%234CB480"/></svg>');
    position: absolute;
    top: -45%;
    right: -5%;
} */

.gallery_items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-lg);
    position: relative;
    z-index: 1;
}
@media screen and (max-width: 800px) {
    .gallery_items {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 500px) {
    .gallery_items {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .gallery_item {
        flex-basis: calc(100% / 3 - var(--spacing-lg) * 2 / 3);
    }

    .gallery_item:nth-child(2),
    .gallery_item:nth-child(3),
    .gallery_item:nth-child(6),
    .gallery_item:nth-child(7),
    .gallery_item:nth-child(9) {
        flex-basis: calc(100% / 3 * 2 - var(--spacing-lg) * 2 / 3 * 2);
        flex-grow: 1;
    }

}


@media (min-width: 761px) {
    .gallery_item {
        flex-basis: calc(39% - var(--spacing-lg) * 2 / 3);
        flex-grow: 1;
    }

    .gallery_item:nth-child(2n + 2) {
        flex-basis: calc(22% - var(--spacing-lg) * 2 / 3);
        flex-grow: 0;
    }
}

.gallery_item {
    overflow: hidden;
    position: relative;
    flex-grow: 1;
    max-height: calc(var(--spacing-xxl) * 4);
}

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

.gallery_item a::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--colorDarker);
    background-image: radial-gradient(226.39% 226.17% at 55.08% -126.14%, var(--colorLighter) 0%, var(--colorDarknest) 77.74%);
    z-index: 1;
    opacity: 0;
    transition: .3s all;
}

.gallery_item a:hover::before,
.gallery_item a:hover img {
    opacity: .75;
}