/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/scss/blocks/portfolio.scss ***!
  \**********************************************************************************************************************************************************************/
:root {
  --theme-main-font: "Roboto Flex", sans-serif;
  --theme-second-font: "Roboto Flex", sans-serif;
}

.portfolio-swiper__navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 44px;
}
.portfolio-swiper__navigation .block__title {
  margin-bottom: 0;
}

.portfolio-swiper__slide {
  max-width: 588px;
  max-height: 350px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}

.portfolio-swiper__slide img {
  -webkit-filter: blur(4px) brightness(0.9);
          filter: blur(4px) brightness(0.9);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
}

.portfolio-swiper__slide.swiper-slide-active img {
  -webkit-filter: none;
          filter: none;
}

@media (max-width: 600px) {
  .portfolio-swiper__navigation {
    margin-bottom: 24px;
  }
  .portfolio-swiper .navigation {
    gap: 100px;
    margin-top: 20px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}