/**
 *  All necessary media requires for media view style.
 *  Do not forget to initial that in _theme-files.php (theme directory/core/components/...).
 *  Do not repeat media require !
 */

/*------------- _ Desktop media styles _ -------------*/

/*Code begins to 991px*/

/*----------- _ End desktop media styles _ -----------*/
/*----------------------------------------------------*/
/*------------- _ Mobile media styles _ --------------*/



/*Code begins form 991px to 0px*/

/*----------- _ End mobile media styles _ ------------*/
/*----------------------------------------------------*/
/*====================================================================*/
/*======================  SMART CAR LANDING (RWD)  ===================*/
/*====================================================================*/

/* ----- large laptops ----- */
@media screen and (max-width:1180px){
    .smart-hero{gap:clamp(12px,1.8vw,32px);}
    .smart-hero__media{flex-basis:46vw;}
    .smart-hero__content{flex-basis:42vw;}
}

/* ----- tablets: stack the hero ----- */
@media screen and (max-width:900px){
    .smart-landing{--page-pad:clamp(24px,6vw,56px);}

    .smart-hero{
        flex-direction:column;
        align-items:center;
        gap:clamp(20px,4vw,34px);
        padding-top:clamp(10px,2vw,20px);
        text-align:center;
    }
    .smart-hero__content{
        order:1;
        flex-basis:auto;
        align-items:center;
        text-align:center;
        max-width:640px;
    }
    .smart-hero__media{
        order:2;
        flex-basis:auto;
        width:100%;
        max-width:430px;
        flex-direction:column;
        align-items:center;
    }
    .smart-hero__offer{flex:0 0 auto;width:90%;margin:0 auto;}
    .smart-hero__ribbon{top:-5%;right:7%;width:15%;}
    .smart-hero__car--desktop{display:none;}
    .smart-hero__car--mobile{display:block;}
    .smart-hero__car{
        order:0;
        align-self:center;
        width:100%;
        margin:-11% auto 0;
    }
    .smart-hero__content .smart-button--hero{display:none;}
    .smart-hero .smart-button--hero-mobile{display:inline-flex;order:3;margin-top:8px;}
}

/* ----- stack the cards ----- */
@media screen and (max-width:768px){
    .smart-cards{
        grid-template-columns:1fr;
        max-width:414px;
        gap:clamp(34px,9vw,46px);
        margin-top:clamp(20px,6vw,34px);
    }
}

/* ----- phones ----- */
@media screen and (max-width:640px){
    .smart-landing{--page-pad:16px;}
    .smart-nav{padding-top:14px;}
    .smart-hero__club{font-size:clamp(22px,6vw,26px);}
    .smart-hero__title{font-size:clamp(36px,10vw,46px);}
    .smart-hero__sub{font-size:clamp(22px,6vw,26px);}
    .smart-hero__offer{width:min(92%,330px);}
    .smart-hero__car{width:min(104%,360px);}
    .smart-body{gap:32px;padding-top:40px;padding-bottom:40px;}
    .smart-body__title{font-size:clamp(28px,7.4vw,36px);}
    .smart-card{min-height:0;padding:48px 14px 24px;}
    .smart-card h3{font-size:20px;}
    .smart-card p{font-size:19px;}
    .smart-footer{gap:24px;}
}

/* ----- small phones ----- */
@media screen and (max-width:380px){
    .smart-hero__title{font-size:34px;}
    .smart-card h3,.smart-card p{font-size:18px;}
    .smart-footer{gap:18px;}
    .smart-footer a{font-size:13px;}
}