@media screen and (max-width: 767px) {
  .container {
    max-width: 428px;
  }
  .section-one {
    background-image: linear-gradient(
        180deg,
        rgba(46, 47, 66, 0.7),
        rgba(46, 47, 66, 0.7)
      ),
      url(../images/people-office-tab.jpg);
  }
  @media (min-device-pixel-ratio: 2),
    (min-resolution: 192dpi),
    (min-resolution: 2dppx) {
    .section-one {
      background-image: linear-gradient(
          180deg,
          rgba(46, 47, 66, 0.7),
          rgba(46, 47, 66, 0.7)
        ),
        url(../images/people-tab-2x.jpg);
    }
  }
  .menu-socials-list {
    justify-content: center;
    gap: 56px;
  }
  .mob-contacts-link:is(:hover, :focus) {
    font-size: 36px;
  }

  .modal {
    top: 96px;
    width: 365px;
    padding: 72px 16px 24px 16px;
  }
}
@media screen and (min-width: 768px) {
  /*--------------------------------------*/
  .container {
    max-width: 768px;
  }

  /*-----------------header---------------------*/

  .main-nav {
    display: flex;
    align-items: center;
  }
  .main-item {
    padding: 24px 0;
  }
  .main-nav-list {
    display: flex;
    gap: 40px;
    justify-content: center;
  }

  .main-link {
    color: var(--navy-blue);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 24px 0;
  }

  .main-link:hover,
  .main-link:focus,
  .main-link:active {
    color: var(--ocean);
  }

  .main-link-logo {
    margin-right: 120px;
  }
  .current {
    position: relative;
    color: var(--ocean);
  }

  .current::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: var(--ocean);
  }
  .main-contacts {
    font-style: normal;
  }

  .main-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: auto;
    align-items: center;
    justify-content: space-between;
  }
  .main-contacts-link {
    color: var(--slate);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .main-contacts-link:hover,
  .main-contacts-link:focus {
    color: var(--ocean);
  }
  .header-btn-open {
    display: none;
  }

  /*---------------Section-one------------------*/

  .section-one-title {
    font-size: 56px;
    line-height: 1.07;
    max-width: 496px;
    margin-bottom: 36px;
  }

  .section-one {
    padding: 188px 0;
    background-image: linear-gradient(
        180deg,
        rgba(46, 47, 66, 0.7),
        rgba(46, 47, 66, 0.7)
      ),
      url(../images/people-office.jpg);
  }

  @media (min-device-pixel-ratio: 2),
    (min-resolution: 192dpi),
    (min-resolution: 2dppx) {
    .section-one {
      background-image: linear-gradient(
          180deg,
          rgba(46, 47, 66, 0.7),
          rgba(46, 47, 66, 0.7)
        ),
        url(../images/people-office-2x.jpg);
    }
  }

  .section-one-title {
    margin-bottom: 48px;
  }
  /*-----------------Description-----------------*/

  .description-list {
    gap: 72px 24px;
  }
  .description-list-item {
    width: calc((100% - 24px) / 2);
  }

  .description-title {
    text-align: start;
    font-size: 36px;
  }

  /*-----------------Team-----------------*/

  .container > .team {
    max-width: 396px;
  }
  .team-list {
    gap: 64px 24px;
  }
  .team-item {
    width: calc((100% - 24px) / 2);
  }

  /*-----------------Customers-----------------*/

  .customers {
    padding: 96px 108px;
  }

  .container > .customers {
    max-width: 552px;
  }

  .customers-list {
    gap: 72px 24px;
  }

  .customers-item {
    width: calc((100% - 48px) / 3);
  }

  /*-------------------Footer---------------------*/

  .footer {
    padding: 97px 164px 96px 108px;
  }
  .container-footer {
    max-width: 552px;
  }
  .footer-link-logo {
    text-align: start;
  }
  .footer-tablet {
    display: flex;
  }
  .footer-main-logo {
    margin-right: 24px;
  }
  .container-social-media {
    margin-bottom: 0;
  }
  .footer-social-text {
    text-align: start;
  }

  .form-footer {
    display: flex;
    gap: 24px;
  }
  .text-form-footer {
    text-align: start;
  }
  .input-footer {
    margin: 0 auto;
    width: 264px;
  }
  .btn-input-footer {
    margin: 0;
  }

  /*--------------------Modal---------------------*/

  .modal {
    top: 96px;
    width: 408px;
    padding: 72px 24px 24px 24px;
  }
}

@media screen and (min-width: 1158px) {
  /*-----------------------------------------------------*/
  .container {
    max-width: 1158px;
  }

  /*-----------------header---------------------*/

  .main-nav {
    flex-grow: 1;
  }
  .main-contacts-list {
    flex-direction: row;
    gap: 40px;
  }
  .main-contacts-link {
    font-size: 16px;
  }
  .main-link-logo {
    margin-right: 76px;
  }

  /*-----------------Description-----------------*/

  .description {
    padding: 120px 0;
  }

  .description-list {
    display: flex;
    gap: 24px;
  }

  .description-list-item {
    width: 100%;
    width: calc((100% - 72px) / 4);
  }

  .description-title {
    font-size: 20px;
  }
  .description-container-icon {
    width: 264px;
    height: 112px;
    background-color: var(--cloud);
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /*-----------------Doing-----------------*/

  .doing {
    display: flex;
    padding-bottom: 120px;
  }

  .doing-list {
    display: flex;
    gap: 24px;
  }

  .doing-item {
    width: calc((100% - 48px) / 3);
  }

  .doing-title {
    color: var(--navy-blue);
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.11;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    margin: 0 auto;
    margin-bottom: 72px;
    min-width: 323px;
  }

  /*-----------------Team-----------------*/
  .team {
    padding: 120px 0;
  }
  .team-list {
    display: flex;
    gap: 24px;
  }
  .team-item {
    width: calc((100% - 72px) / 4);
  }

  /*-----------------Customers-----------------*/

  .customers {
    padding: 120px 0;
  }

  .customers-item {
    display: flex;
    width: calc((100% - 120px) / 6);
  }

  /*-------------------Footer---------------------*/

  .footer {
    padding: 100px 0;
    display: flex;
  }

  .container-footer {
    display: flex;
    align-items: baseline;
    flex-direction: row;
  }

  .footer-main-logo {
    margin-right: 120px;
    margin-bottom: 0;
  }

  .footer-link-logo {
    margin-bottom: 16px;
  }

  .container-social-media {
    margin-right: 80px;
  }
  .footer-main-logo {
    margin-bottom: 0;
  }

  .form-footer {
    align-items: center;
    justify-content: center;
  }
  .modal {
    top: 80px;
  }
}

/*----------------------------------Portfolio-----------------------------------*/
@media screen and (max-width: 767px) {
  .container {
    max-width: 428px;
  }
  .menu {
    padding: 48px 0;
  }
  .menu-list {
    margin: 0 auto;
    margin-bottom: 48px;
    flex-wrap: wrap;
    max-width: 300px;
  }

  .menu-btn {
    padding: 8px 16px;
  }
  .menu-btn:hover,
  .menu-btn:focus {
    background-color: var(--ocean);
    color: var(--white);
    border: 1px solid transparent;
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.08),
      0px 2px 2px rgba(0, 0, 0, 0.12);
  }
  .gallery-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

@media screen and (min-width: 768px) {
  .container {
    max-width: 7688px;
  }
  .menu {
    padding: 64px 0 96px 0;
  }
  .menu-btn {
    padding: 12px 24px;
  }

  .image {
    width: 356px;
  }
  .overflow {
    max-width: 356px;
  }
  .gallery-list {
    row-gap: 72px;
    /* justify-content: center; */
  }
  .gallery-item {
    width: calc((100% - 24px) / 2);
  }
}
@media screen and (min-width: 1158px) {
  .container {
    max-width: 1158px;
  }

  .gallery-item {
    width: calc((100% - 48px) / 3);
  }
  .image {
    width: 360px;
  }
  .overflow {
    max-width: 360px;
  }
}