/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/carousel/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 * 
 * Replace them with your own styles or remove the file completely.
 *
 * @format
 */
.wp-block-mmd-theme-carousel.carousel {
  --swiper-navigation-size: 40px;
  --swiper-navigation-sides-offset: -90px;
  --swiper-navigation-top-offset: 43%;
  --swiper-theme-color: var(--wp--preset--color--bright-white);
  --swiper-pagination-bottom: 40px;
  --swiper-pagination-color: var(--wp--preset--color--blue-700);
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-bullet-inactive-color: var(--wp--preset--color--bright-white);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 8px;
  position: relative;
  width: 100%;
}
.wp-block-mmd-theme-carousel.carousel .swiper-button-prev,
.wp-block-mmd-theme-carousel.carousel .swiper-button-next {
  display: none;
  transition: transform 0.2s;
}
@media (min-width: 782px) {
  .wp-block-mmd-theme-carousel.carousel .swiper-button-prev,
  .wp-block-mmd-theme-carousel.carousel .swiper-button-next {
    display: flex;
    border-radius: 99999px;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 20px;
    width: 120px;
    height: 120px;
  }
  .wp-block-mmd-theme-carousel.carousel .swiper-button-prev:hover,
  .wp-block-mmd-theme-carousel.carousel .swiper-button-next:hover {
    transform: scale(1.1);
  }
}
@media (min-width: 782px) {
  .wp-block-mmd-theme-carousel.carousel .swiper-button-prev::after {
    position: absolute;
    right: 35px;
  }
}
@media (min-width: 782px) {
  .wp-block-mmd-theme-carousel.carousel .swiper-button-next::after {
    position: absolute;
    left: 35px;
  }
}
@media (min-width: 782px) {
  .wp-block-mmd-theme-carousel.carousel .swiper-pagination-container {
    max-width: 1367px;
    padding: 0 24px;
    margin: 0 auto;
    position: relative;
  }
}
.wp-block-mmd-theme-carousel.carousel .swiper-pagination-container .swiper-pagination {
  text-align: center;
}
@media (min-width: 782px) {
  .wp-block-mmd-theme-carousel.carousel .swiper-pagination-container .swiper-pagination {
    box-sizing: border-box;
    left: 24px;
    text-align: left;
    width: auto;
    position: absolute;
    z-index: 1;
  }
}
.wp-block-mmd-theme-carousel.carousel .swiper-pagination-container .swiper-pagination-bullet-active {
  width: 20px;
  height: 20px;
  margin-bottom: -4px;
}
.wp-block-mmd-theme-carousel.carousel .swiper-pagination-container .swiper-pagination-bullet:hover {
  background-color: var(--wp--preset--color--blue-700);
}

/*# sourceMappingURL=style-index.css.map*/