/* Ступени адаптива — как у прежнего сайта: 1060, 992, 767, 480 px. */

/* ── 1060 ── */
@media (max-width: 1060px) {
  .container,
  .header._home .container,
  .main._home .container,
  .works .container,
  .letters .container {
    --container-width: 970px;
  }

  .works-slider {
    width: calc(100% + 10px);
  }

  .article .fasad-bottom-list {
    column-count: 2;
  }
}

/* ── 1023 ── */
@media (max-width: 1023px) {
  .footer__dev {
    padding-top: 30px;
  }

  .footer__dev-link {
    justify-content: center;
    margin: 0 10px;
    zoom: 0.9;
  }
}

/* ── 992 ── */
@media (max-width: 992px) {
  .container,
  .header._home .container,
  .main._home .container,
  .works .container,
  .letters .container {
    --container-width: 750px;
  }

  .header {
    height: auto;
    padding-bottom: 80px;
    background-size: cover;
    background-position: center center;
  }

  .header._home {
    padding-bottom: 40px;
  }

  .page__title {
    top: -95px;
  }

  .header__center {
    margin-left: 60px;
  }

  .hero-slider__caption {
    width: 600px;
    margin: 10px 0 0 30px;
  }

  .services__img {
    width: 30%;
    margin: 0;
  }

  .services__img img {
    max-width: 100%;
  }

  .services__col,
  .services__col._right {
    float: left;
    width: 100%;
    margin: 0;
  }

  .services__item {
    margin-bottom: 10px;
    padding: 10px;
  }

  .services__body {
    float: left;
    width: 70%;
    padding: 0 10px 10px;
  }

  .service-grid__item {
    padding: 10px;
    margin-bottom: 10px;
  }

  .service-grid__img {
    width: 30%;
    margin: 0;
  }

  .service-grid__img img {
    max-width: 100%;
    height: auto;
  }

  .service-grid__body {
    float: left;
    width: 70%;
    max-width: none;
    padding: 0 10px 10px;
  }

  .service-grid__name {
    width: auto;
  }

  .home__sidebar {
    width: 40%;
  }

  .home__content {
    width: 57%;
  }

  .footer__col._info {
    float: left;
  }

  .works-grid__col {
    width: 33.3333%;
  }
}

/* ── 767 ── */
@media (max-width: 767px) {
  .container,
  .header._home .container,
  .main._home .container,
  .works .container,
  .letters .container {
    width: 100%;
    max-width: none;
  }

  /* Буквы Montserrat в строке ниже, чем у шрифта прежнего сайта: длинный заголовок в 3 строки
     касался края шапки — поднят на 11px. */
  .page__title {
    top: -106px;
  }

  .header__logo {
    float: none;
    margin: 0 auto 20px;
  }

  .header__center,
  .header__right {
    margin: 0;
  }

  .header__center {
    margin-top: 34px;
  }

  .menu {
    padding: 10px;
  }

  .menu__burger {
    display: block;
    width: 40px;
    height: 30px;
    border: 2px solid var(--color-white);
    border-radius: 3px;
    background: none;
    line-height: 0;
  }

  .menu__burger-line {
    display: block;
    width: 90%;
    height: 2px;
    margin: 3px auto 0;
    background-color: var(--color-white);
  }

  .menu__burger-line:first-child {
    margin-top: 0;
  }

  .menu__list {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .menu__item {
    display: block;
    width: 100%;
    background: none;
  }

  .menu__arrow {
    position: static;
    float: right;
    margin: -25px 5px 0 0;
  }

  .menu__sub,
  .menu__sub .menu__sub {
    position: static;
    width: 100%;
  }

  .menu__sub-item {
    width: 100%;
    text-align: center;
  }

  .hero-slider__item {
    height: 403px;
  }

  .hero-slider__img {
    width: auto;
    max-width: none;
    height: 100%;
  }

  .hero-slider__caption {
    inset: 0;
    width: auto;
    height: 100%;
    margin: 0;
  }

  .home__sidebar,
  .home__content {
    width: 100%;
  }

  .works__controls {
    position: static;
    display: block;
  }

  .works__all {
    margin: 0;
  }

  .works-nav {
    position: absolute;
    top: 37px;
    right: 21px;
  }

  .works-nav__next {
    margin-right: 0;
  }

  .works-grid__col {
    width: 50%;
  }

  .service-grid__item {
    width: 100%;
  }

  .service-grid__body {
    display: inline-block;
    width: 70%;
    max-width: 490px;
  }

  .article .fasad-bottom-list {
    column-count: 1;
  }

  .pagination__item._start .pagination__link,
  .pagination__item._prev .pagination__link,
  .pagination__item._next .pagination__link,
  .pagination__item._end .pagination__link {
    font-size: 0;
    font-family: Arial, sans-serif;
  }

  .pagination__item._start .pagination__link::after { content: "<<"; }
  .pagination__item._prev .pagination__link::after { content: "<"; }
  .pagination__item._next .pagination__link::after { content: ">"; }
  .pagination__item._end .pagination__link::after { content: ">>"; }

  .pagination__item._start .pagination__link::after,
  .pagination__item._prev .pagination__link::after,
  .pagination__item._next .pagination__link::after,
  .pagination__item._end .pagination__link::after {
    position: relative;
    top: 6px;
    font-size: 13px;
    line-height: 0;
  }

  .pagination__counter {
    float: none;
    margin-bottom: 5px;
    padding: 0;
    text-align: center;
  }

  .pagination {
    margin-bottom: 20px;
  }

  .contacts__info,
  .contacts__form {
    float: none;
    width: 100%;
  }

  .contacts__form {
    margin-bottom: 30px;
  }
}

/* ── 480 ── */
@media (max-width: 480px) {
  .hero-slider,
  .hero-slider__item {
    height: 420px;
    min-height: 420px;
  }

  .header__center,
  .header__right {
    float: none;
    width: 220px;
    margin: 0 auto 20px;
  }

  .services__img {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }

  .services__img img {
    display: inline-block;
  }

  .services__body,
  .services__name {
    display: block;
    float: none;
    width: 100%;
    text-align: center;
  }

  .service-grid__img {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }

  .service-grid__img img {
    display: inline-block;
  }

  .service-grid__body,
  .service-grid__name {
    display: block;
    float: none;
    width: 100%;
  }

  .pagination__link {
    padding-inline: 5px;
  }

  .works-grid__col {
    width: 100%;
  }

  .page__title {
    font-size: 20px;
  }

  .article table {
    font-size: 10px;
  }
}

/* ── 414 ── */
@media (max-width: 414px) {
  .footer__dev-link {
    flex-direction: column;
  }

  .footer__dev-text {
    padding-left: 0;
    text-align: center;
  }

  .footer__dev-text::before {
    display: none;
  }
}