.gallery-section {
    padding: var(--spacing-xl) 0; 
    background-color: var(--light-bg); 
}

.gallery-grid {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: var(--spacing-sm); 
}

.gallery-column {
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-sm); 
}

.gallery-tot {
    position: relative; 
    overflow: hidden; 
    border-radius: 50%; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); 
    cursor: pointer; 
    transition: var(--transition); 
    animation: fadeIn 1s ease-in-out; 
}

.gallery-tot:hover {
    transform: scale(1.05); 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); 
    z-index: 10; 
}

.gallery-tot img {
    width: 100%; 
    height: auto; 
    display:block; 
    transition: transform 0.5s ease; 
}

.gallery-tot:hover img {
    transform: scale(1.1); 
}

.gallery-gradient {
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent); 
    
    opacity: 0; 
    transition: opacity 0.3s ease; 
}

.gallery-tot:hover .gallery-gradient {
    opacity: 1; 
}

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

    .gallery-grid,
    .gallery-column {
        gap: 0.75rem; 
    }

    .gallery-tot:hover {
        transform: scale(1.02); 
    }
}