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

.container{

    width:100%;

    max-width:1400px;

    margin-inline:auto;

    padding-inline:32px;

}

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

.section{

    padding:120px 0;

}

.section-sm{

    padding:80px 0;

}

.section-lg{

    padding:160px 0;

}

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

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:48px;

}

.grid-3{

    display:grid;

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

    gap:32px;

}

.grid-4{

    display:grid;

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

    gap:24px;

}

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

.flex{

    display:flex;

}

.items-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

.flex-column{

    flex-direction:column;

}

.text-center{

    text-align:center;

}

/*==========================================================
SPACING
==========================================================*/

.mb-16{margin-bottom:16px;}
.mb-24{margin-bottom:24px;}
.mb-32{margin-bottom:32px;}
.mb-48{margin-bottom:48px;}
.mb-64{margin-bottom:64px;}
.mb-80{margin-bottom:80px;}

.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}
.mt-48{margin-top:48px;}
.mt-64{margin-top:64px;}
.mt-80{margin-top:80px;}

/*==========================================================
MAIN
==========================================================*/

main{

    padding-top:90px;

}

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

@media (max-width:1200px){

    .container{

        padding-inline:28px;

    }

}

@media (max-width:992px){

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

        grid-template-columns:1fr;

    }

    .section{

        padding:90px 0;

    }

    .section-lg{

        padding:120px 0;

    }

}

@media (max-width:768px){

    .container{

        padding-inline:20px;

    }

    main{

        padding-top:80px;

    }

}

@media (max-width:576px){

    .container{

        padding-inline:18px;

    }

    .section{

        padding:80px 0;

    }

    .section-sm{

        padding:60px 0;

    }

    .section-lg{

        padding:100px 0;

    }

}