@media screen and (min-width: 428px) {
  .container {
    max-width: 426px;
  }
  
}
@media screen and (max-width: 340px) {
    .page-title {
        max-width: 310px;
    }
}

@media screen and (max-width: 400px) {
    .input-sub {
        max-width: 290px;
    }
}
@media screen and (min-width: 320px) and (max-width: 427px) {
    .menu-container .contacts .list .tel {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
    }
    .menu-container .social .list {
        gap: 15px;
        max-width: 270px;
    }
    .menu-container .social .list .item {
        width: 35px;
        height: 35px;
    }
    
}
@media  screen and (min-width: 320px) and (max-width: 420px) {
    .modal {
            width: 300px;
        }
    .modal-header, .modal-item {
        margin-bottom: 0;
    }
 
}


/*-----------------tablet----------------*/
@media screen and (min-width: 768px) {
    header .container {
    max-width: 768px;
    padding-top: 0;
    padding-bottom: 0;
    }
    .container {
        max-width: 768px;
    }
    .section-hero {
        background-image: linear-gradient(to bottom, rgba(46, 47, 66, 0.70), rgba(46, 47, 66, 0.70)), 
        url(../images/retina/background-hero-tablet-1x.jpg);
    }
    @media (min-device-pixel-ratio: 2),
    (min-resolution: 192dpi),
    (min-resolution: 2dppx) and (min-width: 768px) {
    .section-hero {
        background-image: linear-gradient(to bottom, rgba(46, 47, 66, 0.70), rgba(46, 47, 66, 0.70)),
            url(../images/retina/background-hero-tablet-2x.jpg);
    }
}
    .section-offer .list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 72px 24px;
    }
    .section-offer .list .item {
         flex-basis: calc((100% - 24px) / 2);
    }
    .section-offer  .title {
        text-align: unset;
    }
    .section-title-team .list {
        gap: 64px 24px;
    }
    .section-team-item {
        flex-basis: calc((100% - 24px) / 2);
    }
   
  
    .logo {
        margin-right: 120px;
    }
    .nav .list,
    .contacts .list {
        display: flex;
    }
    .open-menu {
        display: none;
    }
    .list .link {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
    }
    .contacts .list .link {
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: 0.04em;
        font-weight: 400;
    }
    .contacts .list {
        flex-direction: column;
        gap: 12px;
    }
    .current::after {
        display: block;
    }
    .backdrop {
        padding: 96px 180px 338px 180px;
    }
    .modal {
        width: 408px;
        height: 582px;
    }
    .customers .list {
        gap: 72px 24px;
    }
    .customers .list .item {
        flex-basis: calc((100% - 48px) / 3);
    }
   
    .customers .icon {
        width: 104px;
    }
    .footer-section {
        display: flex;
        align-items: baseline;
        gap: 24px;
    }
    .footer .link,
    .footer .footer-text,
    .footer .title-text,
    .text, .form-text {
        text-align: left;
    }
    
    .footer form {
        flex-direction: row;
    }
    .input-sub {
        width: 264px;
    }
    .footer .footer-text {
        margin: 0;
        width: 264px;
    }
    .footer .title-text {
        width: 264px;
    }
    .subscribe {
        margin-top: 48px;
    }
    .section-portfolio .container {
         max-width: 766px;
    }
    .section-portfolio {
        padding-top: 63px;
        padding-bottom: 96px;
    }
    .section-portfolio .filter {
        flex-wrap: nowrap;
        justify-content: center;
        margin-bottom: 64px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .list .button {
        padding: 12px 24px;
    }
    
    .section-portfolio .portfolio .item {
        flex-basis: calc((100% - 24px) / 2);
    }
}
@media screen and (min-width: 768px) and (max-width: 1165px) {
    .customers .container,
    .footer .container {
        max-width: 582px;
    }
    .footer-section {
        flex-wrap: wrap;
    }

}

/*---------------desctop----------------*/

@media screen and (min-width: 1158px) {
     .container {
        max-width: 1158px;
    }
    .section-hero {
        background-image: linear-gradient(to bottom, rgba(46, 47, 66, 0.70), rgba(46, 47, 66, 0.70)),
                url(../images/retina/background-hero-desctop-1x.jpg);
    }
     @media (min-device-pixel-ratio: 2),
    (min-resolution: 192dpi),
    (min-resolution: 2dppx) and (min-width: 1166px) {
    .section-hero {
        background-image: linear-gradient(to bottom, rgba(46, 47, 66, 0.70), rgba(46, 47, 66, 0.70)),
                    url(../images/retina/background-hero-desctop-2x.jpg);
             }
    }
    .section-hero .container {
        padding-top: 188px;
        padding-bottom: 188px;
        max-width: 496px;
    }
    .page-title {
        font-size: 56px;
        font-weight: 700;
        width: 496px;
        margin-bottom: 48px;
    }
    .section-offer .container {
        padding-top: 120px;
        padding-bottom: 120px;
        max-width: 1158px;
    }
     .section-offer .list {
        flex-wrap: nowrap;
         gap: 24px;
    }
     .section-offer .list .item {
             flex-basis: calc((100% - 72px) / 4);
    }
     .section-offer .icon-top {
            display: flex;
    }
     .section-offer .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
     }
    .section-offer .title-text {
        font-weight: 400;
    }
    .section-doing {
        display: block;
    }
    .section-title-team {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .section-team-item {
        flex-basis: calc((100% - 24px) / 4);
    }
    .section-title-team .list {
        flex-wrap: nowrap;
    }
    .contacts .list {
        flex-direction: row;
        gap: 40px;
    }     
    header .container {
        max-width: 1158px;
    }
    .contacts .list .link {
        font-size: 16px;
    }
    .backdrop {
        padding: 80px 516px 12px 516px;
    }
   
    .customers {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .customers .list .item {
        flex-basis: calc((100% - 120px) / 6);
    }
    .footer {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .footer-section {
        gap: 0;
    }
    .footer .footer-text {
        margin-right: 120px;
    }
    .footer .social {
        margin-right: 80px;
    }
    .section-portfolio {
        padding-top: 100px;
        padding-bottom: 120px;
    }
    .section-portfolio .container {
        max-width: 1128px;
    }
    .section-portfolio .portfolio .item {
        flex-basis: calc((100% - 48px) / 3);
    }
}