@media screen and (max-width: 960px)  {
    main .splash {position: absolute; height: 100%; top: 0; left: 0; width: 100%; z-index: -1; padding: 0!important;}
    .splash-container .sc {position: initial; min-height: 250px;}
    .grid-3 .content, .advantages, .list.services .content {grid-template-columns: 1fr 1fr;}
    .container {width: 100%;}
    .banner {border-radius: 0; clip-path: unset; margin-bottom: 0;}
    .banner .title {padding: 3rem;}
    footer .nav {display: none;}
    footer .company-info {padding: 48px 0; grid-template-columns: 1fr 1fr;}
    header .container {display: block; width: auto; height: auto; padding: 0 2rem 0 0;}
    header {display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 1rem;}
    header .burger {display: flex; gap: 6px; flex-direction: column; width: 2rem; padding: 7px 0; cursor: pointer;}
    header.attach {padding: 0.5rem 1rem;}
    header .feedback, header .contacts, header .nav {display: none;}
    header .logo .icon {width: 46px; height: 25px;}
    .logo .info .name {font-size: var(--font-size-xs);}
    .logo .info .desc {font-size: var(--font-size-3xs);}
    .breadcrumbs nav ul {display: flex; white-space: nowrap;}
    .breadcrumbs nav ul li:last-child {overflow: hidden; text-overflow: ellipsis;}
    a[href^=tel] {white-space: nowrap;}
    .t33-grid-3 {grid-template-columns: 1fr 1fr; grid-template-areas: "im1 im2" "ttl ttl"; gap: 2rem;}

    .photoviewer {left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 1rem 0;}
    .photoviewer .mhead {padding: 0 1rem; align-items: start;}
    .photoviewer .mhead h3 {padding-left: 2.5rem;}
    .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 .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 .g-container {position: relative;}
    .photoviewer::after,.photoviewer::before {background: none;}
    .photopreviewer .g-container .piccontainer { width: 295px;}

}
@media (max-width: 800px) {
    #t_19 table td:nth-child(2), #t_19 table th:nth-child(2), #t_19 table td:nth-child(3), #t_19 table th:nth-child(3) {
        display: none;
    }
    .clients:not(.slider) .list {grid-template-columns: 1fr 1fr;}
    main.contacts .content .company-info { grid-template-areas: "name name" "phone work" "addr mail"; }
    .map-marker .popup {
        top: 125%; left: -50%;
        &::after {top: -21px;left: 60px; transform: rotate(270deg); }
    }
    .t33-grid-2 {grid-template-columns: auto;}
    .display-4 {font-size: var(--font-size-md);}
    .display-3 {font-size: var(--font-size-lg);}
    .display-2 {font-size: var(--font-size-xl);}
    .display-1 {font-size: var(--font-size-2xl);}
    .textpic {float: unset; width: auto; margin: 0; text-align: center;}
    .textpic img {width: auto; max-width: 100%;}
}
@media screen and (max-width: 576px)  {
    .display-2 {font-size: var(--font-size-lg);}
    .display-1 {font-size: var(--font-size-xl);}
    .grid-3 .content,.grid-2 .content, .advantages, footer .company-info, .list .content  {grid-template-columns: 1fr!important;}
    .list .head {text-align: center;}
    .banner .title {padding: 2rem 1.5rem;}
    .banner .title h3 {font-size: var(--font-size-lg);}
    .head.link {display: block;}
    .clients.slider .item {width: 100%;}
    .clients:not(.slider) .list {grid-template-columns: 1fr;}
    main.contacts .content .company-info { display: flex; flex-direction: column; gap: 1rem;}
}