.brands_logo_wrap{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
  grid-gap: 20px;
}
.brands_logo_wrap>div{
  width: 100%;
  padding-bottom: 40%;
  height: 0;
  position: relative;
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);
  transition: 0.2s linear;
}
.brands_logo_wrap>div:hover{
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
}
.brands_logo_wrap>div>a{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background-position: center;
  background-size: 90% auto;
  background-repeat: no-repeat;
}
.slider_brand{
  position: relative;
}
.slide_brand_wrap{
  display: grid;
  grid-template-columns: repeat(100,25%);
  grid-template-rows: repeat(2,auto);
  scroll-behavior: smooth;
  overflow: hidden;
  grid-auto-flow: column;
}
.slider_brand .prev, .slider_brand .next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1em;
  cursor: pointer;
  z-index: 1;
}
.slider_brand .prev:hover, .slider_brand .next:hover{
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.slider_brand .prev::before, .slider_brand .next::before{
  content: "\f104";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: block;
  font-size: 7vmin;
  height: 55px;
  line-height: 55px;
}
.slider_brand .prev {left: 0}
.slider_brand .next{right: 0;}
.slider_brand .next::before{ transform: rotateY(180deg);}
.slide_brand_wrap>div{
  position: relative;
  width: 100%;
  padding-bottom: 40%;
  height: 0;
}
.slide_brand_wrap>div>a{
  position: absolute;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);
  background-position: center;
  background-size: 80% auto;
  background-repeat: no-repeat;
  background-color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .slide_brand_wrap{ grid-template-columns: repeat(100,50%); }
}
@media screen and (max-width: 380px){
  .slide_brand_wrap{ grid-template-columns: repeat(100,100%); }
}