:root {
  --color1: #2b2b2b;
  --color2: #f5f3fb;
  --color3: #6d58b3;
  --color4: #f0bf2f;
  --color5: #fff7d6;
}

@media (max-width: 1315px) {
  .work {
    & .work__elements {
      & .work__item {
        max-width: 350px;
      }
    }
  }

  .about {
    & .about__elements {
      gap: 60px;
      & img {
        width: 500px;
      }
      & .about__description {
        & p {
          margin-bottom: 30px;
        }
      }
    }
  }
}

@media (max-width: 1180px) {
  .work {
    & .work__elements {
      & .work__item {
        max-width: 300px;
      }
    }
  }
  .about {
    & .about__elements {
      & img {
      }
      & .about__description {
        & p {
        }
      }
    }
  }
}

@media (max-width: 1100px) {
  .work {
    & h2 {
      font-size: 38px;
    }
  }
  .about {
    padding: 70px 0;

    & h2 {
      font-size: 38px;
      margin-bottom: 40px;
    }

    & .about__elements {
      flex-direction: column;
      align-items: center;
      gap: 28px;

      /* текстовый блок */
      & .about__description {
        width: 100%;
        max-width: 720px;
      }

      & p {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 26px;
        text-align: left;
      }

      & ul {
        margin-left: 20px;
        gap: 12px;

        & li {
          font-size: 16px;
          line-height: 1.5;
        }
      }
    }
  }

  .reviews {
    padding: 70px 0;
  }

  .reviews__title {
    font-size: 38px;
  }

  .reviews__wrap {
    gap: 14px;
  }

  .reviews__track {
    gap: 20px;
    transition: transform 0.45s ease;
  }

  .reviews__card {
    flex: 0 0 calc((100% - 20px) / 2); /* 2 карточки, 1 gap=20 */
    padding: 10px;
  }

  .reviews__img {
    height: 320px;
  }

  .reviews__arrow {
    width: 44px;
    height: 44px;
    font-size: 36px;
  }

  .contact__title {
    font-size: 38px;
  }
}

@media (max-width: 1050px) {
  .work {
    & .work__elements {
      & .work__item {
        max-width: 275px;
      }
    }
  }
}

@media (max-width: 950px) {
  .work {
    & .work__elements {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 100px;
      & .work__item {
        max-width: 400px;
      }
    }
  }
}

@media (max-width: 768px) {
  .nav__links {
    /* твои стили */
  }

  /* Очень мощный костыль, но работает почти всегда */

  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  body:has(.nav__links_active) {
    overflow-x: hidden !important;
    position: fixed; /* ← фиксируем body */
    width: 100%;
    left: 0;
    top: 0;
  }

  nav {
    /* чтобы кнопка позиционировалась внутри контейнера */
    & .container {
      position: relative;
    }

    & .hamburger {
      display: flex !important;
      border: none;
      width: 40px;
      height: 20px;
      background: transparent;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2001;

      & span {
        background-color: var(--color4);
        height: 2px;
        width: 100%;
        position: absolute;
        left: 0;
        transition: 0.4s;

        &:nth-child(1) {
          top: 0;
        }
        &:nth-child(2) {
          top: 9px;
        }
        &:nth-child(3) {
          bottom: 0;
        }
      }
    }

    /* меню-оверлей на весь экран */
    & .nav__links {
      position: fixed;
      inset: 0; /* top:0 right:0 bottom:0 left:0 */
      box-sizing: border-box;
      height: 100dvh;
      padding: 0;
      margin: 0;
      max-width: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 24px;
      background-color: var(--color3);
      z-index: 2000;
      transform: translateX(100%);
      transition: transform 0.4s ease;
      width: 100%;
      max-width: 100dvw; /* ← или 100dvw */
      overflow-x: hidden; /* на случай если где-то вылезает контент */

      & a {
        font-size: 24px;
        border-bottom: 2px solid var(--color2);
        padding: 6px 0;

        &:hover {
          color: var(--color4);
          border-bottom-color: var(--color4);
        }
      }
    }

    /* активный класс */
    & .nav__links_active {
      transform: translateX(0);
    }

    /* анимация бургера */
    & .hamburger_active {
      & span:nth-child(1) {
        top: 9px;
        transform: rotate(45deg);
      }
      & span:nth-child(2) {
        transform: translateX(-150%);
        opacity: 0;
      }
      & span:nth-child(3) {
        bottom: 9px;
        transform: rotate(-45deg);
      }
    }
  }
}

@media (max-width: 700px) {
  .reviews {
    padding: 60px 0;
  }

  .reviews__wrap {
    gap: 10px;
  }

  .reviews__track {
    gap: 14px;
    transition: transform 0.4s ease;
  }

  .reviews__card {
    flex: 0 0 100%; /* 1 карточка */
    padding: 10px;
  }

  .reviews__img {
    height: 280px;
  }

  .reviews__arrow {
    width: 40px;
    height: 40px;
    font-size: 32px;
  }

  .reviews__dots {
    gap: 10px;
  }

  .contact {
    & .contact__form {
      padding: 50px 30px 30px;
      & .contact__form-title {
        font-size: 22px;
      }
      & .contact__list {
        & li {
          font-size: 14px;
        }
      }

      & .contact__btn {
      }
    }
  }

  .work__elements {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  header {
    background-position: 65% center;
    & .header__elements {
      & .header__description {
        & h1 {
          font-size: 40px;
          & span {
            font-size: 30px;
          }
        }
      }
    }
  }
  .about {
    padding: 60px 0;

    & h2 {
      font-size: 32px;
      margin-bottom: 60px;
    }

    & .about__elements {
      gap: 22px;

      & img {
        width: 100%;
        margin-bottom: 20px;
      }

      & p {
        font-size: 14px;
        margin-bottom: 22px;
      }

      & ul {
        gap: 10px;

        & li {
          font-size: 15px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .about {
    padding: 60px 0;

    & h2 {
      font-size: 32px;
    }

    & .about__elements {
      gap: 22px;

      & p {
        font-size: 14px;
        margin-bottom: 22px;
      }

      & ul {
        gap: 10px;

        & li {
          font-size: 15px;
        }
      }
    }
  }
}

@media (max-width: 450px) {
  header {
    padding-top: 50px;
    & .header__elements {
      & .header__description {
        & h1 {
          font-size: 34px;
          & span {
            font-size: 24px;
          }
        }

        & p {
          font-size: 16px;
        }

        & a {
          font-size: 16px;
        }
      }
    }
  }

  .contact {
    & .contact__form {
      padding: 40px 20px 25px;
      & .contact__form-title {
        font-size: 22px;
      }
      & .contact__list {
        & li {
          font-size: 14px;
        }
      }

      & .contact__btn {
        font-size: 14px !important;
      }
    }
  }

  .nav__links {
    & a {
      font-size: 18px !important;
    }
  }
}