/* Verbatim <style> block of templates/base.html.twig (Symfony app). */

    body {
        background-color: #000000;
        color: #000000;
    }

    #image-grid .grid {
        column-count: 4; /* default for desktop */
        column-gap: 6px;
        background-color: #000000;
        overflow: hidden;
    }

    .grid-item {
        display: inline-block;
        width: 100%;
        break-inside: avoid;
        opacity: 0;                /* initially hidden */
        transform: scale(0.9);     /* start slightly smaller */
        transition: all 0.6s ease;
        user-select: none;       /* disable text selection */
        -webkit-user-drag: none; /* disable dragging on webkit */
    }

    .grid-item img {
        width: 100%;
        height: auto;
        display: block;
        pointer-events: none;
    }

    /* Tablets */
    @media (max-width: 992px) {
        #image-grid .grid {
            column-count: 3;
        }
    }

    /* Large phones / small tablets */
    @media (max-width: 768px) {
        #image-grid .grid {
            column-count: 2;
        }
    }

    /* Small phones */
    @media (max-width: 480px) {
        #image-grid .grid {
            column-count: 2;
        }
    }

    .owl-carousel .item::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(0,0,0,0) 0%, #000000 100%);
        pointer-events: none;
        z-index: 1;
    }

    /* ===== Projects Grid Styling ===== */
    #projects-section {
        padding: 60px 0;
    }

    /* Visible state after scroll animation */
    .grid-item.visible {
        opacity: 1;
        transform: scale(1);
    }

    /* Image wrapper and hover zoom effect */
    .img-wrap {
        overflow: hidden;
    }

    .img-wrap img {
        transition: transform 0.5s ease, filter 0.5s ease;
    }

    /* Subtle zoom and brightness on hover */
    .grid-item:hover img {
        transform: scale(1.08);
        filter: brightness(1.1);
        cursor: pointer;
    }

    /* Optional: subtle shadow on hover */
    .grid-item:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }