$color-white: #ffffff;
$color-black: #252a32;
$color-light: #f1f5f8;
$color-red: #d32f2f;
$color-blue: #148cb8;

$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);


.slider_main {
  .container {
    max-width: 100% ;
      width: 100%;
      padding: 6px 2rem;
      margin: 0 auto;
    @media (max-width: 768px) {
      padding: 6px 0.5rem;
    }
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .card-image {
            background: $color-white;
            border: none;
            outline: none;
            box-shadow: $box-shadow;
            border-radius: 2px;

            @media only screen and  (min-width: 601px) {
              height: 25vh;
            }

            img {
              display: block;
              position: relative;
              left: 0;
              bottom: 0;
              width: 100%;
              height: auto;
              object-fit: cover;
            }
          }
        }
      }

      .swiper-pagination {
        &-bullet {
          opacity: 0.8;
          background: $color-black;
          &-active {
            background: $color-white;
          }
        }
      }

      .swiper-button-next,
      .swiper-button-prev {
        background-image: none;
        background-size: 0;
        background-repeat: no-repeat;
        background-position: 0;
        margin-top: -1rem;

        .arrow-icon {
          font-size: 2rem;
          color: $color-white;
        }
      }
    }
  }
}

.swiper {
  width: auto;
  height: auto;
  border-radius:3px;

  @media screen and (min-width: 900px) {
    height: 55vh;
  }

}

.swiper-button-next::after{
  content: ""
}
.swiper-button-prev::after{
  content: ""
}