@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;

        background: var(--color-light-xl);
        /* 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-dark-l);
    }

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

    .our-pets {
        padding-bottom: 0px;
    }
    /* .burger-btn {
        display: block;
    }

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

@media (max-width: 320px){  

    .header-content {
        padding: 30px 20px;
        justify-content: space-between;
    }

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

    .pets-content {
        /* padding: 40px 10px; */
        margin: 40px auto;
        width: 320px;
    }

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

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

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

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

    .pets-navigation {
        margin-top: 42px;
        gap: 0px 10px;
    }

    .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);
    }
}