.card-container {
    margin: 32px 0 32px 0;
    display: flex;
    justify-content: center; 
    gap: 20px; 
    max-width: var(--pageWidth);  
}


.section-card {
    padding: 8px;
    background-color: transparent;
    border-radius: 16px; 
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1; 
    min-width: 30%;
    border: 1px solid var(--border-container-small);
    box-shadow: var(--shadow-small-container);
}


.section-card img {
    width: 100%;
    object-fit: cover;
    display: block; 
    border-radius: 12px;
} 
 
.section-card:hover {
    transform: translateY(-10px); 
    box-shadow: var(--shadow-small-container--hover); 
    cursor: pointer;
}


@media (max-width: 1067px) {
.card-container {
        flex-direction: column;  
        align-items: center; 
    }

    .section-card {
        width: 100%; 
        max-width: 400px; 
    }
    
}