/* ==========================================================
 E xotElectronics         *
 Layout Stylesheet
 File: /assets/css/layout.css
 ========================================================== */


/* ==========================================================
 M ain Page Container     *
 ========================================================== */

.main-section{
    width:min(90%, 1400px);
    margin:0 auto;
    padding:20px;
}


/* ==========================================================
 C SS Grid Helpers        *
 ========================================================== */

.grid{
    display:grid;
    gap:16px;
}


/* ==========================================================
 R esponsive Grid Columns *
 ========================================================== */

.cols-2,
.cols-3,
.cols-4{
    grid-template-columns:1fr;
}

@media (min-width:700px){

    .cols-2{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (min-width:980px){

    .cols-3{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (min-width:1200px){

    .cols-4{
        grid-template-columns:repeat(4,1fr);
    }

}


/* ==========================================================
 S plit Layout            *
 ========================================================== */

.split{
    display:grid;
    gap:20px;
    grid-template-columns:1fr;
}

@media (min-width:980px){

    .split{
        grid-template-columns:2fr 1fr;
    }

}


/* ==========================================================
 F lex Helpers            *
 ========================================================== */

.row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}

.row-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.row-center{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}


/* ==========================================================
 G eneric Containers      *
 ========================================================== */

.container{
    width:min(100%, 1400px);
    margin:0 auto;
}

.container-sm{
    width:min(100%, 900px);
    margin:0 auto;
}

.container-lg{
    width:min(100%, 1600px);
    margin:0 auto;
}


/* ==========================================================
 W idth Helpers           *
 ========================================================== */

.w-100{
    width:100%;
}

.w-75{
    width:75%;
}

.w-50{
    width:50%;
}

.w-auto{
    width:auto;
}


/* ==========================================================
 S pacing Helpers         *
 ========================================================== */

.mt-0{margin-top:0;}
.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

.pt-0{padding-top:0;}
.pt-1{padding-top:10px;}
.pt-2{padding-top:20px;}
.pt-3{padding-top:30px;}
.pt-4{padding-top:40px;}

.pb-0{padding-bottom:0;}
.pb-1{padding-bottom:10px;}
.pb-2{padding-bottom:20px;}
.pb-3{padding-bottom:30px;}
.pb-4{padding-bottom:40px;}

/* ==========================================================
 *  Main Page Layout
 *  ========================================================== */
.layout{

    display:flex;

    gap:30px;

    align-items:flex-start;

    width:min(95%,1400px);

    margin:30px auto;

    overflow:hidden;

}


/* ==========================================================
 *  Content Area
 *  ========================================================== */

.content{

    flex:1 1 auto;

    min-width:0;

    width:0;

}


/* ==========================================================
 *  Full Width Content (Home Page)
 *  ========================================================== */

.content-full{

    width:min(95%, 1400px);

    margin:30px auto;

}


/* ==========================================================
 *  Responsive
 *  ========================================================== */

@media (max-width:980px){

    .layout{

        flex-direction:column;

    }

}