.slider {
 width: 840px;
 position: relative;
 overflow: hidden;
}

    .slider__wrapper {
      width: 100%;
      display: flex;
      transition: transform 0.6s ease;
    }

    .product {
      flex: 0 0 31%;
      max-width: 31%;
    }
    
    .slider__control {
      position: absolute;
      top: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      width: 40px;
      color: #fff;
      text-align: center;
      opacity: 0.5;
      height: 50px;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, .5);
    }

    .slider__control_show {
      display: flex;
    }

    .slider__control:hover,
    .slider__control:focus {
      color: #fff;
      text-decoration: none;
      outline: 0;
      opacity: .9;
    }

    .slider__control_left {
      left: 0;
    }

    .slider__control_right {
      right: 0;
    }

    .slider__control::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background: transparent no-repeat center center;
      background-size: 100% 100%;
    }

    .slider__control_left::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }

    .slider__control_right::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }

    .slider__item>div {
      line-height: 250px;
      font-size: 100px;
      text-align: center;
    }
    

@media screen and (max-width: 300px) {
.slider {
 width: 280px;
 position: relative;
 overflow: hidden;
}
.product {
 flex: 0 0 95%;
  max-width: 95%;
 }
}

@media screen and (min-width: 301px) and  (max-width: 460px){
.slider {
 width: 300px;
 position: relative;
 overflow: hidden;
}
.product {
 flex: 0 0 95%;
  max-width: 95%;
 }
}
@media screen and (min-width: 461px) and  (max-width: 600px){
.slider {
 width: 380px;
 position: relative;
 overflow: hidden;
}
.product {
 flex: 0 0 95%;
  max-width: 95%;
 }
}
@media screen and (min-width: 601px) and  (max-width: 768px){
.slider {
 width: 580px;
 position: relative;
 overflow: hidden;
}
.product {
 flex: 0 0 47%;
  max-width: 47%;
 }
}
@media screen and (min-width: 769px) and  (max-width: 992px){
.slider {
 width: 580px;
 position: relative;
 overflow: hidden;
}
.product {
 flex: 0 0 47%;
  max-width: 47%;
 }
}
@media screen and (min-width: 993px) and  (max-width: 1100px){
.slider {
 width: 640px;
 position: relative;
 overflow: hidden;
}
.product {
 flex: 0 0 47%;
  max-width: 47%;
 }
}