/*============================================================================================
   Start Banner css
==============================================================================================*/
.banner-grid .single-banner {
  display: block;
}
.banner-grid .single-banner img {
  width: 100%;
  border-radius: 6px;
}
.banner-wrapper {
  display: grid;
  gap: 16px;
}
.banner-wrapper.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.banner-wrapper.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.banner-wrapper.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Banner Slider  */
.banner-wrapper .swiper {
  overflow: hidden;
  padding: 0px 2px;
}
.single-banner {
  display: block;
}
.single-banner img {
  width: 100%;
  border-radius: 20px;
}

.banner-wrapper .pg-inner .swiper-pagination {
  bottom: -5px;
}
.banner-wrapper .swiper-slide {
  padding-bottom: 24px;
}

@media (max-width: 991px) {
  .banner-wrapper {
    gap: 12px;
  }
  .banner-wrapper.grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*============================================================================================
   End Banner css
==============================================================================================*/