/* ==========================================
   LOGNEXUS LAYOUT
========================================== */

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

.container{

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

    margin-inline:auto;

}

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

.section{

    padding:var(--section-padding) 0;

}

.section-sm{

    padding:60px 0;

}

.section-lg{

    padding:120px 0;

}

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

.grid{

    display:grid;

    gap:24px;

}

.grid-2{

    display:grid;

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

    gap:30px;

}

.grid-3{

    display:grid;

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

    gap:30px;

}

.grid-4{

    display:grid;

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

    gap:30px;

}

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

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* ==========================
   GAP
========================== */

.gap-1{

    gap:8px;

}

.gap-2{

    gap:16px;

}

.gap-3{

    gap:24px;

}

.gap-4{

    gap:32px;

}

/* ==========================
   WIDTH
========================== */

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

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

.mt-1{

    margin-top:12px;

}

.mt-2{

    margin-top:24px;

}

.mt-3{

    margin-top:40px;

}

.mt-4{

    margin-top:64px;

}

.mb-1{

    margin-bottom:12px;

}

.mb-2{

    margin-bottom:24px;

}

.mb-3{

    margin-bottom:40px;

}

.mb-4{

    margin-bottom:64px;

}

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

@media(max-width:992px){

    .grid-4{

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

    }

    .grid-3{

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

    }

}

@media(max-width:768px){

    .grid-2,

    .grid-3,

    .grid-4{

        grid-template-columns:1fr;

    }

}