@charset "UTF-8";

/* =====================================================
   ILLUSTRATION PAGE
   Scoped to .illustration-page only —
   won't affect index, project, or any other page
===================================================== */

.illustration-page {
    padding: 7rem 120px 5rem;
}

.illustration-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.illustration-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.illustration-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #e5e5e5;
    overflow: hidden;
}

.illustration-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.illustration-caption {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.5;
}

/* =====================================================
   BREAKPOINTS — scoped to illustration-page only
===================================================== */

/* Tablet — below 1024px */
@media (max-width: 1023px) {
    .illustration-page {
        padding: 6rem 48px 4rem;
    }

    .illustration-grid {
        gap: 32px;
    }
}

/* Mobile — below 768px */
@media (max-width: 767px) {
    .illustration-page {
        padding: 5rem 24px 3rem;
    }

    .illustration-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .illustration-caption {
        font-size: 0.8rem;
    }
}

/* Small mobile — below 480px */
@media (max-width: 479px) {
    .illustration-page {
        padding: 5rem 16px 3rem;
    }

    .illustration-grid {
        gap: 24px;
    }
}