:root{
    /*--main-font: 'Open Sans', sans-serif;*/
    --main-color-dark: #262626;
    --main-color: #727272;
    --text-color: #5C5C5C;
    --grey-color: #B4B4B4;
    --white-color: #FFFFFF;

    --accent-color: #DEA537;

    --bg-color: #FFEAC9;
    --input-bg-color:#DEA537;

    --social-icon-bg: #000000;
    --social-icon-text: #ffffff;

    --body-color: #FFF8EC;
}

/* header */

.header .nav .list .item{
    color: var(--main-color-dark);
}

.header .box .logo{
    width: 434px;
    height: 100px;
    background-image: url("/assets/images-default-template/logo-rus-desktop.svg");
}

.header .nav .logo{
    width: 123px;
    height: 80px;

    background-image: url("/assets/images-default-template/logo-nav.svg");
}


/* cart */
.cart::before {
    width: 21px;
    height: 25px;
    background-image: url('/assets/images-default-template/icons/cart.svg');
}

/* home */
.grid .banner{
    background-image: url("/assets/images-default-template/main-first-banner-desktop.jpg");
}

/* social */
.social .wrapper {
    background-image: url("/assets/images-default-template/social/subscribe-banner-desktop.jpg");
}
.social .title, .social .text{
    color:var(--white-color);
}

.footer{
    background-color: var(--main-color-dark);
}


.footer .logo{
    width: 99px;
    height: 105px;

    background-image: url("/assets/images-default-template/logo-mini.svg");
}



@media screen and (max-width:768px) {
    .header .nav{
        background-color: var(--main-color-dark);
    }
    .header .nav .list .item{
        color:#fff;
    }

    .grid .banner{
        background-image: url("/assets/images-default-template/main-first-banner-mobile.jpg");
    }

    .page-grid .block>.img {
        aspect-ratio: 24/9;
    } 

    .social .wrapper{
        background-image: url("/assets/images-default-template/social/subscribe-banner-mobile.jpg");
        background-position: center bottom;
        aspect-ratio: 670/400; 
    }

    .header .box .logo {
        width: 139px;
        height: 37px;
    }


    .footer .logo {
        width: 85px;
        height: 90px;
    }
}

@media screen and (min-width: 769px) {
    .grid>.container>.wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }
}