.gallery-grid {
    padding-top: 20px;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(12,1fr);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    text-decoration: none;
    outline: 1px solid rgba(34,242,254,.25);
    background: var(--bg);
    transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease, filter .25s ease;
    box-shadow: 0 0 0 rgba(34,242,254,0), inset 0 0 0 rgba(255,0,230,0);
}

.gallery-item img{
    grid-column: span 4;
    width: 100%;
    display: block;
    aspect-ratio: 1378/919;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.05);
    transition: transform .45s ease, filter .25s ease;
}

.gallery-item::before{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius) + 1px);
    background: linear-gradient(135deg, rgba(34,242,254,.0) 20%, rgba(34,242,254,.6) 50%, rgba(255,0,230,.35) 80%, rgba(34,242,254,.0) 95%);
    filter: blur(16px);
    opacity: .0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.gallery-item::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,6,19,.55), rgba(10,6,19,.0) 60%);
    pointer-events: none;
    mix-blend-mode: screen;
}
.gallery-item:hover{
    transform: translateY(-3px) scale(1.012);
    box-shadow: 0 0 20px rgba(34,242,254,.18), 0 0 48px rgba(255,0,230,.12);
    outline-color: var(--secundary);
    filter: drop-shadow(0 0 12px rgba(34,242,254,.22));
}
.gallery-item:hover::before {
    opacity: .9;
}

.gallery-item:hover img {
    transform: scale(1.06);
    filter: saturate(1.15) contrast(1.1);
}

@media (min-width: 1201px) {
    .gallery-grid { grid-template-columns: repeat(12,1fr); }
    .gallery-item { grid-column: span 4; }
    .gallery-item:nth-child(6n + 1),
    .gallery-item:nth-child(6n + 2) { grid-column: span 6; }
    .gallery-item:nth-child(6n + 6) { grid-column: span 12; }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .gallery-grid { grid-template-columns: repeat(8,1fr); }
    .gallery-item { grid-column: span 4; }
    .gallery-item:nth-child(4n + 1),
    .gallery-item:nth-child(4n + 4) { grid-column: span 8; }
}

@media (max-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(2,1fr); }
    .gallery-item { grid-column: span 2; }
}