/* Arts/Gallery Section */
.section_arts {
    background-color: #526EF9; /* Change background to white */
    position: relative;
    overflow: hidden;
    padding: 4rem 0; /* Restore padding for desktop */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 100vh; /* Restore full-screen height for desktop */
}

.arts_container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 1920px; /* Increase max-width for widescreen */
    padding: 0 1rem; /* Restore left/right padding */
    box-sizing: border-box;
    margin: 0 auto; /* Restore horizontal centering */
}

/* .arts_title styles have been removed */

.arts_row {
    display: flex;
    height: 250px; /* Uniform row height */
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.arts_scroll_content {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    height: 100%;
    will-change: transform;
    /* JS will handle the animation here */
}

.arts_image, .arts_video {
    height: 240px;
    width: 240px;
    object-fit: cover;
    border-radius: 20px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.arts_image:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* --- Responsive Design --- */

@media screen and (max-width: 1024px) {
    .arts_row {
        height: 200px;
    }
    
    .arts_image, .arts_video {
        height: 180px;
        width: 180px;
    }

    /* .arts_title media query has been removed */
}

@media screen and (max-width: 768px) {
    .section_arts {
        display: block; /* [Mobile Override] Change to block layout */
        min-height: auto; /* [Mobile Override] Height determined by content */
        padding: 3rem 0;
    }

    .arts_row {
        height: 160px;
    }
    
    .arts_image, .arts_video {
        height: 140px;
        width: 140px;
        border-radius: 12px;
    }

    /* .arts_title media query has been removed */
}

@media screen and (max-width: 480px) {
    .section_arts {
        padding: 2rem 0;
    }

    .arts_row {
        height: 130px;
    }
    
    .arts_image, .arts_video {
        height: 110px;
        width: 110px;
        border-radius: 8px;
    }
    
    .arts_scroll_content {
        gap: 1rem;
    }

    /* .arts_title media query has been removed */
}