.grid-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    grid-auto-flow: dense;
}
/* 1 */
.gallery-item:nth-child(6n + 1) {
    grid-column: 3 / 5;
}
/* 2 */
.gallery-item:nth-child(6n + 2) {
    grid-column: 2 / 3;
}
/* 3 */
.gallery-item:nth-child(6n + 3) {
    grid-column: 1 / 2;
}
/* 4 */
.gallery-item:nth-child(6n + 4) {
    grid-column: 1 / 3;
}
/* 5 */
.gallery-item:nth-child(6n + 5) {
    grid-column: 3 / 4;
}
/* 6 */
.gallery-item:nth-child(6n + 6) {
    grid-column: 4 / 5;
}
.gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    a {
        display: flex;
        width: 100%;
        border-radius: 24px;
        overflow: hidden;
        height: clamp(180px, 17vw, 250px);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        &:before {
            content: "\e923";
            font-family: 'icomoon';
            font-size: 42px;
            width: 100%;
            height: 100%;
            background-color: #0C4DA266;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: 0.4s;
            opacity: 0;
            backdrop-filter: blur(12px);
        }
        &:hover:before {
            opacity: 1;
        }
    }
}
@media only screen and (max-width: 768px) {
    .gallery-item:nth-child(6n + 1) {
        grid-column: 1 / 5;
    }
    .gallery-item:nth-child(6n + 2) {
        grid-column: 1 / 3;
    }
    .gallery-item:nth-child(6n + 3) {
        grid-column: 5 / 3;
    }
    .gallery-item:nth-child(6n + 4) {
        grid-column: 5 / 1;
    }
    .gallery-item:nth-child(6n + 5) {
        grid-column: 3 / 5;
    }
    .gallery-item:nth-child(6n + 6) {
        grid-column: 1 / 3;
    }
}