/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/block-image/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.
 */
@keyframes potato-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -20px, 0) rotate(1.2deg);
  }
  100% {
    transform: translate3d(-0, -0, 0) rotate(0deg);
  }
}
@keyframes potato-float-reverse {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, 16px, 0) rotate(-1deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
.block-image {
  position: relative;
}
.block-image:nth-child(2) .potato.top {
  top: -30px;
  right: 0px;
}
.block-image:nth-child(2) .potato.bottom {
  bottom: -30px;
  right: 0px;
}
.block-image:nth-child(1) .potato.top {
  top: -30px;
  left: 0;
}
.block-image:nth-child(1) .potato.bottom {
  bottom: -30px;
  left: 0;
}
.block-image .potato {
  position: absolute;
  z-index: 1;
  will-change: transform;
  animation: potato-float 3s ease-in-out infinite;
}
.block-image .potato.top {
  animation-delay: -0.8s;
}
.block-image .potato.bottom {
  animation-name: potato-float-reverse;
  animation-duration: 6.6s;
  animation-delay: -1.4s;
}
.block-image .potato svg {
  max-width: 120px;
  width: 100%;
  height: auto;
}
.block-image .wrapper-image {
  display: block;
  width: 100%;
  padding-right: 30px;
}
.block-image img {
  border-radius: 200px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  height: 200px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.block-image img.contain {
  border-radius: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
@media (min-width: 768px) {
  .block-image img {
    height: 370px;
  }
}
@media (min-width: 1200px) {
  .block-image {
    margin: auto;
  }
  .block-image img {
    height: 410px;
  }
  .block-image:nth-child(2) .wrapper-image {
    padding-right: 100px;
  }
  .block-image:nth-child(2) .potato.top {
    top: -90px;
    right: 0px;
  }
  .block-image:nth-child(2) .potato.bottom {
    bottom: -60px;
    right: 0px;
  }
  .block-image:nth-child(1) .wrapper-image {
    padding-left: 100px;
  }
  .block-image:nth-child(1) .potato.top {
    top: 0;
    left: 0;
  }
  .block-image:nth-child(1) .potato.bottom {
    bottom: 0;
    left: 0;
  }
}

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