.gallery-container {
    column-count: 3;
    column-gap: 5px;
    width: 100%;
}

.gallery-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    background: linear-gradient(var(--bg-main), var(--bg-main)) padding-box,
                repeating-linear-gradient(
                    var(--deg),
                    var(--accent),
                    var(--accent-secondary),
                    var(--link-clicked),
                    var(--accent-secondary),
                    var(--accent) 100%
                ) border-box;
    background-size: 400% 400%;
    background-position: 100%;
    border-radius: 0.6rem;
    border: 4px solid transparent;
    animation: var(--ani) var(--speed) linear infinite reverse;
}

@keyframes gradient-h {
    0%{background-position:100% 50%}
    100%{background-position:-33% 50%}
}
@keyframes gradient-hr {
    0%{background-position:-33% 50%}
    100%{background-position:100% 50%}
}
@keyframes gradient-v {
    0%   { background-position: 50% 100%; }
    100% { background-position: 50% -33%; }
}
@keyframes gradient-vr {
    0% { background-position: 50% -33%; }
    100%   { background-position: 50% 100%; }
}



.gallery-card img {
    display: block;
    width: 100%; 
    height: auto;
    margin: 0;
    min-height: 100px;
    padding: 0;
    border-radius: 0.35rem; 
}

/* Optional: responsive columns (keeps it tight on small screens) */
@media (max-width: 1200px) {
  .gallery-container { column-count: 2; }
}
@media (max-width: 600px) {
  .gallery-container { column-count: 1; }
}