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

.op-container {

    width: 100%;
    max-width: var(--op-container-width);

    margin: 0 auto;
    padding: 0 var(--op-container-padding);

}


/* ======================================================
   SECTION
====================================================== */

.op-section {

    position: relative;

    width: 100%;
    min-height: var(--op-section-height);

    overflow: hidden;

}


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

.op-grid {

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;

}


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

.op-flex {

    display: flex;

}

.op-flex-center {

    display: flex;
    justify-content: center;
    align-items: center;

}


/* ======================================================
   HIDDEN
====================================================== */

.op-hidden {

    display: none !important;

}