.collection {
    position: absolute;
    max-width: 70%;
    max-height: 30rem;
    padding: 0rem 0rem;
    margin:0;
    left: 20rem;
    top: 5rem;
    
  }

  @media (max-width: 500px) {
    .collection {
      left: -50%;
      top:2rem;
      max-width: 150%;
    }

  }

  
  .swiper{
      width: 100%;
      position:relative;
      margin:0;
      top: 2rem;
      left: 0;
      z-index: 1;
  }
  
  .mySwiper {
    width: 100%;
    height: 400px; 
    visibility: visible;
     
  }
  
  .swiper-slide {
    width: auto;
    
  }
  


  .swiper-wrapper{
      width: 30rem;
      margin-right: 0;
      display: flex;
      align-items: flex-end;
      
  }
  
  .swiper_container {
    height: 23rem;
    padding: 2rem 0;
    position: relative;
    
  }
  
  .swiper-slide {
    width: 23rem;
    height: 23rem;
    position: relative;
    visibility: hidden;
    filter: opacity(70%);
  }


  
  
  .swiper-slide.swiper-slide-visible {
      width: 23rem;
      height: 23rem;
      position: relative;
      visibility: visible;
    }
  
    .swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active {
      width: 23rem;
      height: 23rem;
      position: relative;
      visibility: visible;
      filter: opacity(100%);
    }
  
  @media (max-width: 500px) {
    .swiper_container {
      height: 22rem;
      width: 30rem;
    }
    .swiper-slide {
      width: 22rem !important;
      height: 20rem !important;
      filter: opacity(100%);
    }
  
    .swiper-slide.swiper-slide-next{
     visibility: hidden;
     filter: opacity(50%);
    }
    .swiper-slide img {
      width: 22rem !important;
      height: 20rem !important;
    }
  }
  
  .swiper-slide img {
    width: 30rem;
    height: 20rem;
    border-radius: 1rem;
    object-fit: cover;
  }
  
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right {
    display: none;
  }
  
  .slider-controler {
    position: relative;
    left: 5rem;;
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .slider-controler .swiper-button-next {
    left: 58% !important;
    transform: translateX(-58%) !important;
  }
  
  @media (max-width: 990px) {
    .slider-controler .swiper-button-next {
      left: 70% !important;
      transform: translateX(-70%) !important;
    }
  }
  
  @media (max-width: 450px) {
    .slider-controler .swiper-button-next {
      left: 80% !important;
      transform: translateX(-80%) !important;
    }
  }
  
  @media (max-width: 990px) {
    .slider-controler .swiper-button-prev {
      left: 30% !important;
      transform: translateX(-30%) !important;
    }
  }
  
  @media (max-width: 450px) {
    .slider-controler .swiper-button-prev {
      left: 20% !important;
      transform: translateX(-20%) !important;
    }
  }
  
  .slider-controler .slider-arrow {
    background: var(--white);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    left: 42%;
    transform: translateX(-42%);
    filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
    
  }
  
  .slider-controler .slider-arrow ion-icon {
    font-size: 3rem;
    color: #222224;
    padding-left: 2px;
  }
  
  .slider-controler .slider-arrow::after {
    content: '';
  }