body {
}

/* ========================================= */
/* INSTAGRAM GRID LOGIC - ERIC SURREAL ART   */
/* ========================================= */

.custom-ig-grid {
    display: grid;
    /* 3 columns on desktop */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

    /* 1. The Container for Each Image */
    .custom-ig-grid a {
        display: block;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        /* Force a perfect 1:1 square ratio */
        aspect-ratio: 1 / 1;
        transform: translateZ(0);
    }

    /* 2. The Images Inside the Container */
    .custom-ig-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures no distortion */
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* 3. The Hover Effect */
    .custom-ig-grid a:hover img {
        transform: scale(1.05);
    }

/* ========================================= */
/* MOBILE RESPONSIVE LOGIC                   */
/* ========================================= */

/* Tablet & Mobile Landscape: 2 Columns */
@media (max-width: 992px) {
    .custom-ig-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Small Mobile Portrait: 2 Columns */
@media (max-width: 576px) {
    .custom-ig-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}