@media (max-width: 767.5px){  
    .burger-btn {
        display: block;
        z-index: 2;
    }
    
    .nav { 
        position: absolute;
        top: 0;
        right: -320px;
        /* left: -320px; */

        margin-top: 0;

        width: 320px;
        /* height: 823px; */ 
        height:  100%;

        background: var(--color-dark-3xl);
        /* background-color: gray; */
        /* display: none; */
        
        transition: transform .5s;
    }

    .nav-list {
        display: block;
        margin-top: 248px;
    }

    .nav-item {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    .nav-links {
        margin: 0px;

        font-family: var(--second-family);
        font-weight: 400;
        font-size: 32px;
        line-height: 160%;
        color: var(--color-light-s);
    }

    .header.open .nav{
        transform: translateX(-100%)
    }

    .about-the-shelter {
        padding-bottom: 0px;
    }

    .start-screen-content {
        justify-content: center;
        width: 100vw;
    }

    .content-text {
        /* margin: 0; */
        /* width: 100vw; */
    }

    .content-heading {
        /* margin: 0; */
    }

    .content-subheading {
        width: 100vw;
    }

    .make-a-friend {
    
        margin: 0 auto;
        margin-top: 42px;
    }

    .content-dog-img {
        margin: 0px auto;
        margin-top: 100px;
        
        width: 100vw;
    }

    .about-content {
        /* width: 450px; */
        overflow: hidden;
    }

    .about-text {
        margin: 0px auto;
    }

    .help-head-title {
        margin: 0;
    }

    .pets-slider {
        flex-wrap: wrap;
        gap: 20px
    }

    .left-slider-btn {
        order: 1;
    }

    .pets-slider-cards {
        width: 100%;

    }

    .pets-card {
    }

    .right-slider-btn {
        order: 2;
    }

    .donation-content-title {
        margin: 0;
        padding: 0;
    }

    .donation-content-subtitle {
        margin: 0;
        padding: 0;
    }

    .donation-card {
        margin: 0;

        width: 281px;
        height: 43px;
    }

    .donation-content-sub-card-number {
        margin: 0;
    }

    .donation-content-img {
        margin: 0 auto;
        width: 260px;
        height: 135px;
    }

    .donation-card-number{
        padding-top: 5px;
        font-size: 15px;
        line-height: 110%;
    }

    .footer-content {
        
        margin: 0px auto;
        margin-top: 30px;
    }
}


@media (max-width: 320px){  
    
    .header {
        background: url("./assets/img/background-320px.jpg"), radial-gradient(237.5% 111.8% at 0% 0%, rgb(91, 72, 58) 0%, rgb(38, 36, 37) 100%), var(--start-screen-gradient-background);
    }

    .header-content {
        padding: 30px 20px 0px 20px;
    }

    /* .burger-container {
        display:contents;
    } */

    /* .nav-list {
        display: none;
    } */

    .start-screen {
        background: url("./assets/img/background-320px.jpg"), radial-gradient(237.5% 111.8% at 0% 0%, rgb(91, 72, 58) 0%, rgb(38, 36, 37) 100%), var(--start-screen-gradient-background);
    }

    .start-screen-content {
        display: flex;
        flex-wrap: wrap;
        padding-top: 60px;
        /* padding: 60px 10px 0px 10px; */
    
        width: 320px;
    }

    .content-text {
        margin: 0px;
    }

    .content-heading {
        margin: 0px;
    }

    .content-heading-title { 
        font-size: 25px;
        letter-spacing: 0.06em;
        text-align: center;
    }

    .content-subheading {
        width: 300px;
    }

    .content-subheading {
        margin-top: 40px;
    }

    .content-subheading-subtitle {
        text-align: center;
    }

    .make-a-friend{
        margin: 0px auto;
        margin-top: 42px;
    }

    .content-dog-img{
        margin: 105px 10px 0px 40px;

        width: 260px;
        height: 271px;
    }

    .about-content {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        justify-content: center;
        padding: 42px 10px;
    
        width: 320px;
    }

    .about-pets-img{
        margin: 0px auto;
        margin-top: 42px;

        width: 260px;
        height: 353px;
    }

    .about-text {
        margin: 0px; /*должно быть: 14px 175px 14px 0px; но съезжает*/
        width: 300px;
    }

    .about-text-title {
        margin: 0px 15px 25px 15px;

        font-size: 25px;
        text-align: center;
        color: var(--color-dark-l);
    }

    .about-text-subtitle {
        margin: 0px 15px;
        margin-top: 22px;

        text-align: justify;
    }

    .pets-content {
        padding: 42px 10px;
        width: 320px;
    }

    .pets-title {
        margin: 0px;
        margin-bottom: 42px;
    }

    .pets-title-item {
        font-size: 25px;
    }

    .pets-slider {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .left-slider-btn {
        margin: 0px;
        margin-left: 58px;
        order: 1;
    }

    .pets-card {
        margin: 0px 15px 19px 15px;
        /* width: 100%; */
    }

    .pets-content-btn {
        margin-top: 32px;
    }

    .right-slider-btn {
        margin: 0px;
        margin-right: 58px;
        order: 2;
    }

    .get-to-know-the-rest{
        margin-top: 43px;
    }

    .help-content {
        width: 320px;
        padding: 42px 15px;
    }

    .help-head-title {
        margin: 0px 30px 42px;

        font-size: 25px;
    }

    .help-head-item {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 25px;
        line-height: 130%;
        letter-spacing: 0.06em;
        text-align: center;
        color: var(--color-dark-l);
    }

    .help-list {
        justify-content: space-between;
        gap: 30px 30px;
    }

    .help-svg {
        height: 50px;
    }

    .help-list-item-title {
        margin-top: 20px;

        font-size: 15px;
        line-height: 110%;
    }

    .help-list-item {
        width: 130px;
    }

    .donation-content {
        flex-wrap: wrap;
        flex-direction: column-reverse;

        padding: 0;
        width: 300px;
    }

    .donation-content-title {
        margin: 42px 10px 25px 10px;
        padding: 0px 30px;

        font-size: 25px;
        text-align: center;
    }    

    .donation-content-subtitle {
        margin: 0px 14px 23px 14px;

        letter-spacing: 0;
    }

    .donation-card {
        margin: 20px 10px 0px 10px;

        width: 281px;
        height: 43px;
    }

    .donation-card-number{
        padding-top: 5px;
        font-size: 15px;
        line-height: 110%;
    }

    .donation-content-sub-card-number {
        margin: 20px 10px;

        text-align: justify;
    }

    .donation-content-img {
        margin: 0px auto;
        margin-top: 22px;
        margin-bottom: 42px;

        width: 260px;
        height: 135px;
    }

    .footer {
        height: 809px;
        background: url("./assets/img/background-320px.jpg"), radial-gradient(237.5% 111.8% at 0% 0%, rgb(91, 72, 58) 0%, rgb(38, 36, 37) 100%), var(--start-screen-gradient-background);
    }

    .footer-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0px;
        

        margin: 30px 10px 0px 10px;
    }

    .footer-content-contacts {
        margin: 0px;
    
        width: 278px;
        /* height: 234px; */
    }

    .contacts-title {
        font-size: 25px;
        text-align: center;

        width: 278px;
    }

    .connect {
        margin-top: 38px;
        justify-content: center;
    }

    .footer-content-location {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        margin-top: 35px;
        padding: 0px;
    
        width: 302px;
        /* height: 234px; */
    }

    .location {
        margin-top: 40px;
    }

    .location-title {
        margin-top: 0px;
    }

    .footer-dog-img {
        margin-top: 33px;

        width: 260px;
        height: 269px;
    }


    /*--------------------------------------------------------------------------------*/
    .button-container {
        display: flex;
        justify-content: end;
    
        position: relative;
        right: -40px;
    }

    .popap-card {
        width: 240px;
    
        display: flex;
        text-justify: center;
        background-color: #fff;
        border-radius: 9px;
    }
    
    .popap-photo {
        display: none;
    }
    
    .card-text {
        /* margin: 50px 20px 0px 30px; */
        /* width: 240px; */
    }

    .text-name {
        text-align: center;
    }
    
    .text-breed {
        text-align: center;
    }
    
    .text-description {
        margin-top: 20px;
    
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 13px;
        line-height: 107%;
        letter-spacing: 0.06em;
        text-align: justify;
        color: #000;
    }
    
    .card-list{
        margin-top: 24px;
        margin-left: 15px;
    }
    
    .card-list-item {
        margin-top: 5px;
    
        list-style: initial;
        color: var(--color-primary);
    }
}