@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*Universal*/

* {
   font-family: "Roboto", sans-serif;
   line-height: 24px;
   letter-spacing: -0.2px;
   margin: 0;
}

/*container*/
.container {

   max-width: 1200px;
   margin: 0 auto;
   padding: 16px;
   background-color: #f6f4f4c9;

}

/*Header text*/

.header_text {

   background-color: #F8F8F8;
}

h2 {

   color: #7E7E82;
   font-weight: 400;
   font-size: 16px;
   text-transform: uppercase;
   padding: 16px 8px;

}

/*Swiper*/

.swiper {

   display: flex !important;
   width: 100%;
   height: 150px;
   margin-left: 8px;


}

.swiper-slide {

   height: 50px !important;
   width: 250px;
   border: none;
   padding: 30px 0;
   border: none;


}

.swiper-slide img {

   max-width: 100%;
   max-height: 60px;

}

.swiper-slide__card {

   border-style: none;
   box-shadow: none;
   outline: none;
   border: none;

}

.mobile-content {

   display: block;

}

.tablet-content {

   display: none;

}

@media(min-width:768px) {

   .mobile-content,
   .desktop_view{

      display: none;

   }

   .tablet-content {

      display: flex;
      flex-direction: column;

   }

   .slides {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0;
   }

   .additional_items.is-visible {
      display: flex;
      flex-wrap: wrap;
      padding: 0;

   }

   .additional_items{
      display: none;
   }

   .slides__cards {

      list-style: none;
      padding: 10px 15px;
      border-radius: 8px;
      width: 210px;

   }

   .show-more{

      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 15px; 
      background: none; 
      border:none;
      width:180px;
   }

   .show-more__arrow{

      width: 10px;
   }

   .show-more:hover{
      cursor: pointer;
      opacity: 0.8;
      transform: opacity 0.2s ease-in-out;
   }

}

@media(min-width:1121px){

   .slides,
   .additional_items{
      gap:0 20px;
   }

   .desktop_view{

      display: block;
   }

}