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


/* HEADER */

.page-header {

    width:min(1200px,90%);

    margin:120px auto 80px;

}


.page-number {

    color:#8C9161;

    font-size:.85rem;

    letter-spacing:4px;

    margin-bottom:20px;

}


.page-header h1 {

    font-size:clamp(3.5rem,7vw,7rem);

    margin-bottom:40px;

}


.page-intro {

    max-width:600px;

    color:#555;

}



/* ========================= */
/* FILTRY */
/* ========================= */


.portfolio-filter {

    width:min(1200px,90%);

    margin:0 auto 100px;

    display:flex;

    gap:40px;

    border-bottom:1px solid #D8D0C2;

    padding-bottom:25px;

}


.portfolio-filter a {

    font-size:.95rem;

    color:#555;

    transition:.3s;

}


.portfolio-filter a:hover {

    color:#C8873A;

}



/* ========================= */
/* GALERIA */
/* ========================= */


.portfolio-grid {

    width:min(1200px,90%);

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:100px 70px;

}



.artwork {

    cursor:pointer;

}



.artwork img {

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    transition:

    transform .5s ease,

    opacity .5s ease;

}



.artwork:hover img {

    transform:scale(.985);

    opacity:.9;

}



/* ========================= */
/* INFORMACJE O PRACY */
/* ========================= */


.artwork-info {

    margin-top:25px;

}



.artwork-info h2 {

    font-size:1.25rem;

    font-weight:400;

    margin-bottom:10px;

}



.artwork-info p {

    margin:0;

    color:#777;

    font-size:.95rem;

}



/* ========================= */
/* OPIS PORTFOLIO */
/* ========================= */


.portfolio-note {

    width:min(700px,90%);

    margin:180px auto;

    text-align:center;

}


.portfolio-note h2 {

    margin-bottom:30px;

}



/* ========================= */
/* RESPONSIVE */
/* ========================= */


@media(max-width:900px){


    .portfolio-grid {

        grid-template-columns:1fr;

        gap:70px;

    }


    .portfolio-filter {

        flex-wrap:wrap;

        gap:20px;

    }


}