/* ==========================================================
   CONTAINERS
========================================================== */

.pz-container{

    width:min(calc(100% - 64px), var(--pz-container));

    margin-inline:auto;

}

.pz-container-small{

    width:min(calc(100% - 64px), var(--pz-container-small));

    margin-inline:auto;

}

.pz-container-wide{

    width:min(calc(100% - 80px), var(--pz-container-wide));

    margin-inline:auto;

}

/* ==========================================================
   SECTIONS
========================================================== */

.pz-section{

    position:relative;

    padding:120px 0;

}

.pz-section-sm{

    padding:80px 0;

}

.pz-section-lg{

    padding:160px 0;

}

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

.pz-grid{

    display:grid;

}

.pz-grid-2{

    display:grid;

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

    gap:var(--pz-space-8);

}

.pz-grid-3{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:var(--pz-space-8);

}

.pz-grid-4{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:var(--pz-space-8);

}

/* ==========================================================
   FLEX
========================================================== */

.pz-flex{

    display:flex;

}

.pz-flex-column{

    display:flex;

    flex-direction:column;

}

.pz-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.pz-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.pz-flex-start{

    display:flex;

    justify-content:flex-start;

    align-items:center;

}

.pz-flex-end{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

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

@media(max-width:992px){

    .pz-grid-4{

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

    }

}

@media(max-width:768px){

    .pz-container,
    .pz-container-small,
    .pz-container-wide{

        width:min(calc(100% - 40px),100%);

    }

    .pz-grid-2,
    .pz-grid-3,
    .pz-grid-4{

        grid-template-columns:1fr;

    }

}