﻿.container-wrap {
    margin: 0 auto;
    padding: 0 var(--sbox-px);
}

.products-main-content {
  background-color: #292929;
}

.products-title {
  background-image: url("/img/products/products_bg.jpg");
  background-position: center;
  background-size: cover;
  text-align: center;
  padding: 30% 0 20%;
}

.products-title h3 {
  font-size: 30px;
  margin-top: 0;
  color: #f3f3f3;
}

.products-title p {
  color: #fff;
  font-size: 14px;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .products-title {
    background-image: url("/img/products/products_bg.jpg");
    padding: 20% 0 10%;
  }
  .products-title h3 {
    font-size: 80px;
    margin-top: -5%;
  } 
  .products-title p {
    font-size: 18px;
  }
}

.products-series-wrap {
  max-width: 1335px;
  padding-bottom: 16px;
}

.products-series-item {
  width: 32.3333%;
  display: block;
  margin-bottom:1.5%;
  /*margin: 16px 38px 0;*/
}

.products-series-item img {
  width: 100%;
}

@media (min-width: 768px) {
/*  .products-series-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5%;
    padding-bottom: 5%;
  }*/

    .products-series-wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5%;
        padding-bottom: 5%;
    }


    .products-series-item {
        width: 100%;
        /*min-width: 30%;*/
        box-shadow: 0 0 0 0 rgba(44, 44, 44, 0);
        transform: scale(1);
        transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
        transition-property: box-shadow, transform;
    }

  .products-series-item:hover {
    box-shadow: 0px 16px 32px 7px rgba(0, 0, 0, 0.29);
    transform: scale(1.02);
  }
}
@media(min-width: 1400px) {
    .container-wrap {
        padding: 0 calc(var(--xbox-px) - 22px);
    }
}
