@media (max-width: 1340px) {
    :root {--padtop: 40px; --padside: 60px; --navpos: -60px;}
    main {width: 100%; box-shadow: none;}
    header {height: calc(100vw / 2.233); aspect-ratio: 2.233; align-content: end; padding-top: unset;}
    .advantages > div {padding: 10px;}
    #loggerwraper {width: 100%!important; height: 50px!important; top: unset!important; bottom: 0!important;}
    #loggerwraper:hover {height: 250px!important; width: 100%!important;}
}
@media(max-width: 1170px) {
    .advantages > div {grid-template-rows: 130px auto;}
}
@media (max-width: 996px) {
    .advantages {grid-template-columns: 1fr 1fr; grid-template-rows: auto;}
    section#о-товаре {display: flex;flex-direction: column-reverse;}
    section#о-товаре .pic {aspect-ratio: 1.33;}
    footer {margin-bottom: 0;}
    .photoviewer {left: 0; top: 0; width: 100%; height: 100%; margin: 0;}
    .photoviewer .piccontainer, .g-container .description {height: 50vh; width: 100vw; margin: 0;}
    .g-container .description {word-break: break-word;height: 70vh;}
    .g-container .description dl {grid-template-columns: 40% auto;}
    .photoviewer h2.h1 {padding: 24px 20px; margin-right: 50px; font-size: 26px;}
    .photoviewer a.close {top: 10px; right: 0; background: var(--brandcolor); border: 10px solid var(--2nback);}
    .photoviewer .about {padding: 29px 14px 38px;}
    .photoviewer .about ol li {width: 100%;margin-bottom: 5px}
    .photoviewer .about ol li::before {width: 32px; height: 32px; line-height: 32px;}
    .photoviewer a.nav {top: 0; height: 50vh; width: 60px;}
    .photoviewer .nav::after {left: unset; margin-left: unset;}
    .photoviewer .g-container {position: relative;}
    section.category a.nav::after {left: unset; margin-left: unset; right: 5px;}
    .photoviewer::after,.photoviewer::before {background: none;}
    #обратная-связь .pic {transform: scale(2) translateX(-40px);}
    .photopreviewer .g-container .piccontainer { width: 295px;}
}
@media (max-width: 730px) {
    footer {grid-template-columns: auto;
        grid-template-areas: "logo" "links" "copyright"; gap: 30px;}
    header div.c {
        display: flex; justify-content: space-between;align-items: center;
    }
    header div.c p.h {margin: 0; font-size: 4.5vw;line-height: 1rem; color: white;}
    #обратная-связь .pic {order: -1; background-position: left; opacity: unset; transform: unset;}
    #обратная-связь { grid-template-rows: 150px auto; grid-template-columns: unset; gap: 20px;}
    #orderbtn {width: 220px;}
    header {grid-template-areas: "nav title" "bg  bg   "; grid-template-columns: calc(45px + var(--padside)) 1fr;  display: grid; height: unset;
        background: var(--2n1back) url("../img/metal21.jpg") no-repeat;
        background-blend-mode: overlay;
    }
    header nav { grid-area: nav; padding: 0; width: unset; position: unset; background: unset; box-shadow: unset;}
    header nav .burger {display: block; text-align: right;}
    header nav ul {display: none; position: fixed;
        z-index: 100;
        background: var(--2n1back);
        width: 90vw;
        height: calc(100vh - 70px);
        top: 70px;}
    header nav li a {width: 100%; box-sizing: border-box;}

    header div.bg {position: unset;height: calc(100vw / 2.233); aspect-ratio: 2.233; grid-area: bg;}
    header div.c p.h {white-space: nowrap; font-size: 6vw;}
    header div.c p {margin: 0; font-size: 28px;line-height: 1rem;}
    header div.c {
        position: unset; grid-area: title; display: flex;
        justify-content: space-between;align-items: center;
/*        background: var(--2n1back) url("../img/metal21.jpg") no-repeat;
        background-blend-mode: overlay;*/
        background: transparent; background-blend-mode: unset;
        padding: 10px var(--padside) 10px 0;
    }
    /*header {height: unset; aspect-ratio: unset; display: grid; grid-template-areas: "title" "bg"}*/
    #orderbtn {
        position: relative;
        height: 40px; padding: 0;
        width: 40px; border-radius: 50%; transform: translateY(-4px);
        &:after {
            position: absolute; left: 0; top: 0; right: 0; bottom: 0; text-align: center; align-content: center;
            content: '';
            background: url('../img/phone.svg') center no-repeat;
            background-size: 30px;
        }
        &:hover {
            &::after {background: url('../img/phone.svg') center no-repeat;}
        }
    }
}
@media (max-width: 560px) {
    :root {--padtop: 20px; --padside: 30px; --navpos: -30px;}
    .advantages {grid-template-columns: auto;}
    .advantages > div {grid-template-columns: 80px 1fr; align-items: center;  gap: 10px; grid-template-rows: auto;}
    .advantages .icon {height: 80px;}
    .advantages div:hover .icon {transform: unset;}
    ol,ul {padding-left: 20px;}
    .photopreviewer .nav::after {right: 0; left: unset; margin-left: 0;}
    .photopreviewer a.nav {width: 60px; height: calc(100% - 42px);}
    .photopreviewer .g-container .piccontainer { width: calc(100vw - 60px); height: unset; aspect-ratio: 1.5; }
    .photopreviewer .gg-item {border: none; padding: 0;}
    .modal .close {background: var(--brandcolor); right: 15px;}
    div.modal .flds input, div.modal .flds textarea {width: calc(100vw - 184px);}
    div.modal {width: 100%; left: 0;}
    div#about {width: 100%; left: 0;}
    div#about dl {display: block;}
    .photoviewer h2.h1 {font-size: 24px;}
    .g-container .descr .hh { right: 10px;}
    header {grid-template-columns: calc(75px) 1fr;}
    /*h1 {font-size: 22px;}
    h2 {font-size: 20px;}
    h3 {font-size: 18px;}
    h4 {font-size: 16px;}
    header p.h {font-size: 22px}*/
}