/* ===================================================
   UTILITIES
=================================================== */

.container {

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

    margin: auto;

}

.section {

    padding: 110px 0;

}

.center {

    text-align: center;

}

.grid {

    display: grid;

    gap: 30px;

}

.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-center {

    display: flex;

    justify-content: center;

    align-items: center;

}

.space-between {

    justify-content: space-between;

}

.align-center {

    align-items: center;

}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mt-4 {
    margin-top: 40px;
}

.mt-5 {
    margin-top: 60px;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mb-3 {
    margin-bottom: 30px;
}

.mb-4 {
    margin-bottom: 40px;
}

.mb-5 {
    margin-bottom: 60px;
}

.w-100 {

    width: 100%;

}

@media(max-width:992px) {

    .grid-4 {

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

    }

    .grid-3 {

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

    }

}

@media(max-width:768px) {

    .section {

        padding: 80px 0;

    }

    .grid-2,

    .grid-3,

    .grid-4 {

        grid-template-columns: 1fr;

    }

}