/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/media-query-plugin/src/loader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./assets/scss/blocks/hero.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
.hero__cnt::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, transparent 70%);
}
@media (min-width: 768px) {
  .hero__cnt::after {
    top: -120px;
    bottom: -120px;
    transform: rotate(11.18deg);
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero__cnt {
    min-height: 400px;
    max-width: 500px;
  }
  .hero__cnt::after {
    left: -30px;
    right: -30px;
  }
}
@media (min-width: 992px) and (max-width: 1229.98px) {
  .hero__cnt {
    min-height: 450px;
    max-width: 550px;
  }
  .hero__cnt::after {
    left: -40px;
    right: -40px;
  }
}
@media (min-width: 1230px) {
  .hero__cnt {
    min-height: 550px;
    max-width: 660px;
  }
  .hero__cnt::after {
    left: -80px;
    right: -80px;
  }
}
@media (max-width: 767.98px) {
  .hero__cnt {
    min-height: 350px;
  }
  .hero__cnt::after {
    top: 0;
    left: -15px;
    right: -15px;
    bottom: 0;
  }
}