/*==========================================================
PUENTE DEL INCA
DESIGN SYSTEM
03. LAYOUT
==========================================================*/

/*=========================
CONTENEDOR
=========================*/

.pi-container{

    width:min(100% - 48px,var(--container));

    margin-inline:auto;

}

/*=========================
CONTENEDOR WIDE
=========================*/

.pi-container-wide{

    width:min(100% - 48px,var(--container-wide));

    margin-inline:auto;

}

/*=========================
CONTENEDOR TEXTO
=========================*/

.pi-container-text{

    width:min(100% - 48px,760px);

    margin-inline:auto;

}

/*=========================
SECCIONES
=========================*/

.pi-section{

    padding:var(--space-3xl) 0;

    position:relative;

}

.pi-section-sm{

    padding:var(--space-xl) 0;

}

.pi-section-lg{

    padding:12rem 0;

}

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

.pi-grid{

    display:grid;

    gap:2rem;

}

.pi-grid-2{

    display:grid;

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

    gap:3rem;

}

.pi-grid-3{

    display:grid;

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

    gap:2rem;

}

.pi-grid-4{

    display:grid;

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

    gap:2rem;

}

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

.pi-flex{

    display:flex;

}

.pi-flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.pi-flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*=========================
ESPACIADOS
=========================*/

.pi-gap-sm{

    gap:1rem;

}

.pi-gap-md{

    gap:2rem;

}

.pi-gap-lg{

    gap:4rem;

}

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

@media(max-width:1024px){

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

        grid-template-columns:1fr;

    }

}