.event-images {
    margin-top: 52px;
    padding-top: 28px;
    padding-bottom: 34px;
}


.images-container {
    position: relative;
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 20px 0;
}

.image-item {
    flex: 0 0 280px;
    height: 270px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: rotate(-3deg);
    scroll-snap-align: center;
    transition: transform 0.3s ease;
}

/* Hide placeholder on mobile */
.image-placeholder {
    display: none;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-item:hover {
    transform: rotate(0deg) scale(1.02);
}

.image-item:hover img {
    transform: scale(1.05);
}


/* Tablet: Switch to grid layout */
@media (min-width: 768px) {

    .event-images h2 {
        text-align: left;
        font-weight: 800;
        margin-bottom: 60px;
    }

    .images-container {
        gap: 50px;
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .image-item {
        height: 340px;
        top: 0;
        transition: top 0.3s ease, transform 0.3s ease;
    }

    .image-item.left-sibling {
        top: 20px;
        transform: scale(1.1) rotate(-3deg);
    }

    .image-item.right-sibling {
        top: -20px;
        transform: scale(1.1) rotate(-3deg);
    }

}

@media (min-width: 1366px) {
    .images-container {
        gap: 100px;
        overflow-x: none;
        justify-content: center;
    }

    .image-item {
        display: none;
    }

    .image-item.centered-shown-image,
    .image-item.left-sibling,
    .image-item.right-sibling {
        display: block;
    }

    /* Show placeholder on desktop when needed */
    .image-placeholder.left-sibling,
    .image-placeholder.right-sibling {
        display: block;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .gallery-arrow {
        background-color: var(--yellow);
        padding: 20px 10px;
        cursor: pointer;
        position: absolute;
        color: var(--grey-700);
        z-index: 10000;
    }

    .gallery-arrow.disabled {
        pointer-events: none;
        opacity: 0.3;
    }

    .gallery-arrow.gallery-arrow-left {
        transform: rotate(-45deg);
    }

    .gallery-arrow.gallery-arrow-right {
        transform: rotate(45deg);
    }

    .gallery-arrow.gallery-arrow-left .fas {
        transform: rotate(45deg);
    }

    .gallery-arrow.gallery-arrow-right .fas {
        transform: rotate(-45deg);
    }


}