
.brands {
     background-color: #fff;
     grid-column-start: 1;
}

.brands-title {
     height: 1.9rem;
     color: #131313;
     font-family: InterSemiBold;
     font-weight: 600;
     text-transform: uppercase;
     font-size: 1.5rem;
     text-align: left;
     line-height: 2rem;
}

.brands-text {
     color: #131313;
     font-family: Inter;
     font-weight: 400;
     text-align: left;
}

.brands-slide {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     filter: grayscale(1);
}

.brands-slide img { opacity: 0.7; }

.brands-slide { background-image: url('../img/brands-slide--mid.svg'); }
.brands-slide:last-child { background-image: url('../img/brands-slide--last.svg'); }

@media (min-width: 600px) {
     
     .brands {
          width: 160rem;
          height: 42.2rem;
     }
     
     .brands-title {
          width: 69rem;
          grid-column-start: 15;
          grid-column-end: 84;
          margin-top: 12rem;
     }
     
     .brands-text {
          width: 69rem;
          height: 10.2rem;
          font-size: 3rem;
          line-height: 3.5rem;
          grid-column-start: 85;
          grid-column-end: 154;
          margin-top: 12rem;
     }
     
     .brands-nav {
          position: absolute;
          right: 7rem;
          bottom: 3.4rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 9.5rem;
          height: 4rem;
          z-index: 2;
     }
     
     .brands-nav div {
          width: 4rem;
          height: 4rem;
          background-image: url('../img/nav-btn.svg');
          cursor: pointer;
     }
     
     .brands-nav--next { transform: rotate(180deg); }
     
     .brands-nav div.swiper-button-disabled { opacity: 0.3; }
     
     .brands-slider {
          width: 139rem;
          height: 17rem;
          margin-top: 6rem;
          grid-column-start: 15;
          grid-column-end: 154;
     }
     
     .brands-slide {
          width: 34rem;
          height: 17rem;
     }
     
     .brands-slide img {
          max-width: 18.8rem;
          max-height: 7rem;
     }
     
     .brands-slide:hover { filter: grayscale(0); }
     
     .brands-slide:hover img { opacity: 1; }
     
     .brands-slide--logo {
          width: 18rem;
          height: 5.5rem;
     }
     
     .brands-slide--img {
          width: 18rem;
          height: 5.5rem;
     }
}

@media (max-width: 599px) {
     
     .brands {
          width: 43rem;
          height: 35.1rem;
          padding-bottom: 0.1rem;
          grid-column-end: 44;
     }
     
     .brands-title {
          width: 39rem;
          grid-column-start: 3;
          margin-top: 7.9rem;
     }
     
     .brands-text {
          width: 39rem;
          height: 10.4rem;
          font-size: 2.2rem;
          line-height: 2.6rem;
          grid-column-start: 3;
          margin-top: 2.5rem;
          order: 1;
     }
     
     .brands-nav { display: none; }
     
     .brands-slider {
          width: 39.8rem;
          height: 9.8rem;
          grid-column-start: 1;
          grid-column-end: 41;
          margin-top: 2.5rem;
          order: 2;
     }
     
     .brands-slide {
          width: 19rem;
          height: 9.8rem;
     }
     
     .brands-slide img {
          max-width: 12.3rem;
          max-height: 4.6rem;
     }
     
     .brands-slide:active { filter: grayscale(0); }
     
     .brands-slide:active img { opacity: 1; }
     
     .brands-slide--logo {
          width: 11.3rem;
          height: 3.5rem;
     }
}
