/* ==========================================================
 *  ExotElectronics
 *  Responsive Stylesheet
 *  File: /assets/css/responsive.css
 *  ========================================================== */


/* ==========================================================
 *  Large Desktop
 *  ========================================================== */

@media (max-width:1400px){

    .container,
    .main-section,
    .xe-nav-inner{
        width:95%;
    }

}


/* ==========================================================
 *  Laptop / Tablet Landscape
 *  ========================================================== */

@media (max-width:1200px){

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

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

}


/* ==========================================================
 *  Tablet
 *  ========================================================== */

@media (max-width:980px){

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

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

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

    .row{
        flex-direction:column;
        align-items:stretch;
    }

    .main-section{
        width:95%;
        padding:18px;
    }

    /* Hero */

    .xe-hero{
        padding:24px 0;
        text-align:center;
    }

    .xe-hero .wrap,
    .xe-hero .inner,
    .xe-hero .container{
        grid-template-columns:1fr;
    }

    .xe-hero img,
    .xe-hero video,
    .xe-hero svg{
        max-width:100%;
        height:auto;
    }

}


/* ==========================================================
 *  Mobile
 *  ========================================================== */

@media (max-width:700px){

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.6rem;
    }

    h3{
        font-size:1.3rem;
    }

    .section-title{
        font-size:1.4rem;
    }

    .card{
        padding:16px;
    }

    .ghost-btn,
    .cta-btn{
        width:100%;
        text-align:center;
    }

    .site-nav{
        flex-direction:column;
    }

    .site-nav a{
        width:100%;
        text-align:center;
    }

}


/* ==========================================================
 *  Small Phones
 *  ========================================================== */

@media (max-width:480px){

    body{
        font-size:15px;
    }

    .main-section{
        width:100%;
        padding:14px;
    }

    .card{
        border-radius:12px;
    }

    .xe-hero{
        padding:18px 0;
    }

    .xe-hero h1{
        font-size:1.8rem;
    }

    .xe-hero p{
        font-size:1rem;
    }

}


/* ==========================================================
 *  Very Small Phones
 *  ========================================================== */

@media (max-width:360px){

    h1{
        font-size:1.6rem;
    }

    h2{
        font-size:1.3rem;
    }

    .section-title{
        font-size:1.2rem;
    }

    .card{
        padding:12px;
    }

}