/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.wrapper{

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

    margin:auto;

}

.grid{

    display:grid;

    gap:24px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.flex{

    display:flex;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

@media(max-width:900px){

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

        grid-template-columns:1fr;

    }

}