/* =========================
   PORTFOLIO PAGE
========================= */


/* PAGE TITLE
========================= */

.page-title {
    text-align: center;
    padding: var(--space-8) var(--space-6) var(--space-6);
}

.page-title h1 {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.page-title p {
    margin-top: var(--space-3);
    font-size: 14px;
    color: var(--muted);
}


/* PORTFOLIO CONTAINER
========================= */

.portfolio-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    padding: 0 var(--space-6) var(--space-9);
}


/* GRID
========================= */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    gap: var(--space-7);
    align-items: start;
    justify-content: center;
}


/* ARTWORK CARD
========================= */

.artwork-card {
    overflow: hidden;
    max-width: 480px;        /* single-item cap */
    justify-self: center;    /* centers it in its column */
}


/* LINK
========================= */

.artwork-link {

    display: block;

    text-decoration: none;

    color: var(--text);

}


/* IMAGE
========================= */

.artwork-image {

    overflow: hidden;

    background: #eae7df;

}


.artwork-image img {

    width: 100%;

    height: auto;

    display: block;

    aspect-ratio: auto;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        opacity 0.5s ease;

}



/* HOVER IMAGE EFFECT
========================= */

.artwork-card:hover .artwork-image img {

    transform: scale(1.04);

    opacity: 0.9;

}



/* ARTWORK INFORMATION
========================= */

.artwork-info {

    padding-top: var(--space-4);
    text-align: center;

}


.artwork-title {

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

}


.artwork-year {

    margin-top: var(--space-2);

    font-size: 14px;

    color: var(--muted);

}



/* =========================
   TABLET
========================= */

@media (max-width:1024px) {


    .portfolio-container {

        padding-left: var(--space-5);
        padding-right: var(--space-5);

    }


    .portfolio-grid {

        gap: var(--space-6);

    }

}



/* =========================
   MOBILE
========================= */

@media (max-width:768px) {


    .page-title {

        padding-top: var(--space-7);

    }


    .page-title h1 {

        font-size: 26px;

    }


    .portfolio-container {

        padding-left: var(--space-4);
        padding-right: var(--space-4);

    }


    .portfolio-grid {

        grid-template-columns: 1fr;

        gap: var(--space-7);

    }


    .artwork-info {

        padding-top: var(--space-3);

    }


    .artwork-title {

        font-size: 15px;

    }

}


/* =========================
   FOOTER
========================= */

.footer {
    text-align: center;
    padding: var(--space-6);
    color: var(--muted);
    font-size: 13px;
}