:root {
   --mainColor: #453E2B;
   --beige: #B2A494;
   --platina: #D3C9BF;
}

@media only screen and (max-width: 1365px) {
   header {
      padding-block: 25px;
   }

   .header__container,
   .footer-top,
   footer .menu-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
   }

   .logo {
      display: flex;
      width: 100%;
      justify-content: center;
      order: -1;
   }

   .section-firs,
   .hero {
      padding-top: 170px;
   }

   .card-product__container {
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(1.25rem, 0.532rem + 3.07vw, 3.75rem);
   }

   .card-product__img,
   .table-pr {
      margin-inline: 0;
   }

   .table-pr--col-1,
   .table-pr--col-2 {
      border-bottom: 1px solid var(--mainColor);
      align-self: end;
   }

   .table-pr--col-3 {
      grid-column: span 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(1.25rem, 0.532rem + 3.07vw, 3.75rem);
   }

   .card-product--col-2 {
      grid-template-columns: 3fr 4fr;
   }
}

@media only screen and (max-width: 1199px) {
   .city__container {
      grid-template-columns: repeat(2, 1fr);
   }
   .pc__city{
      display: none !important;
   }
   .mob__city{
      display: grid !important;
   }

   .city__bg {
      right: -250px;
   }
}

@media only screen and (max-width: 959px) {
   .hero__container {
      display: block;
   }

   .hero__wrapper {
      max-width: none;
   }

   .title-h1 {
      font-size: clamp(2.375rem, 1.523rem + 3.64vw, 4.25rem);
   }

   .hero__img {
      max-width: 75%;
      margin-left: auto;
   }

   .sec-products__row {
      grid-template-columns: 1fr 1fr;
   }

   #index .sec-products .item-product--big {
      order: -1;
   }

   .card-product--col-2 {
      grid-template-columns: 1fr 1fr;
   }

   .table-pr__number {
      display: none;
   }
	
	.hero__img {
      margin-right: auto;
   }
}

@media only screen and (max-width: 767px) {

   .table-pr--col-3,
   .card-product__container {
      display: block;
   }

   .info__row,
   .contacts__container,
   .service-bottom__row,
   .section-row {
      grid-template-columns: 1fr;
   }

   .section-firs,
   .hero {
      padding-top: 110px;
   }

   #catalog .breadcrumb,
   .last-col,
   .footer-bottom .menu-list li:nth-child(1),
   .footer-bottom .menu-list li:nth-child(2){
      display: none;
   }

   .menu-list .d-none {
      display: block;
   }

   #mob-menu .language {
      display: flex;
      justify-content: center;
   }

   .header__container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
   }

   .item-city__head {
      height: clamp(3rem, 2.583rem + 1.78vw, 3.438rem);
   }

   .item-city__head,
   .item-city__body {
      padding-inline: clamp(0.938rem, 0.043rem + 3.82vw, 1.875rem);
   }


   /*bars*/
   .bars {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      width: 25px;
      height: 19px;
      cursor: pointer;
      margin-left: 20px;
      order: -2;
   }

   .bars span {
      display: inline-block;
      width: 100%;
      height: 2px;
      background: var(--mainColor);
      margin-bottom: 6px;
      transition: all 0.3s;
   }

   .bars span:nth-child(3) {
      margin-bottom: 0;
   }

   #mob-menu {
      display: flex;
      position: fixed;
      top: 0;
      bottom: 0;
      left: -101%;
      height: 100dvh;
      width: 100%;
      max-width: 500px;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      z-index: 110;
      flex-direction: column;
      overflow-y: auto;
      background: #D3C9BF;
      padding: 45px;
      justify-content: space-between;
      text-align: center;
   }

   #mob-menu .menu-list {
      flex-direction: column;
      text-align: left;
   }

   #mob-menu .icon-close {
      display: block;
      position: absolute;
      top: 45px;
      right: 35px;
      font-size: 25px;
   }

   .our__row {
      gap: 20px;
   }

   .hero__wrapper{
      padding-left: 0;
   }

}

@media only screen and (max-width: 639px) {

   .city {
      background: #F1ECE6;
   }

   .footer-top .menu-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(4, 1fr);
      grid-auto-flow: column;
      padding-top: 20px;
   }

   .hero__text-wrapper {
      flex-direction: column;
   }

   .hero__text-wrapper .hero__button {
      order: 2;
      width: 100%;
   }

   .info__img-bl {
      grid-template-rows: 4fr 2.5fr 4fr;
   }

   .hero {
      background: url("../img/hero-bg-mob.png") no-repeat center;
      background-size: cover;
   }

   #contacts .hero {
      background: url("../img/map-mob.png") no-repeat center;
      background-size: cover;
   }
}

@media only screen and (max-width: 479px) {
   footer .menu-list {
      width: 100%;
      grid-template-columns: 1fr auto;
   }

   .footer-bottom .menu-list {
      justify-content: left;
   }

   .viewed__head {
      align-items: start;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 20px;
   }
}

@media only screen and (max-width: 413px) {
   .menu-list li {
      padding-inline: 20px;
   }
}

@media only screen and (max-width: 374px) {
   .container {
      padding-inline: 7px;
   }

   .menu-list li {
      padding-inline: 20px;
   }

   .city__container,
   .city__col {
      gap: 7px;
   }

   .viewed__title, .item-offer__text{
      font-size: 28px;
   }

   .table-pr__spec,
   .item-product__name{
      font-size: 20px;
   }
}


/*min-width*/
@media only screen and (min-width: 1366px) {
   .footer-bottom .copy {
      margin-left: auto;
   }
}

@media only screen and (min-width: 768px) {

   .language,
   .menu-list li {
      padding-inline: clamp(0.938rem, 0.148rem + 1.64vw, 1.875rem);
   }
}