.block-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.5rem;
  max-width: 1500px;
  margin: 0 auto;
  /* Target all paths within SVG elements */
  /* If you want to target specific paths individually */
  /* Define the rotation keyframes */
}
@media (min-width: 768px) {
  .block-hero {
    grid-template-columns: 6fr 6fr;
  }
}
@media (min-width: 1200px) {
  .block-hero {
    grid-template-columns: 5fr 7fr;
    gap: 2rem;
    padding: 1.5rem 3rem;
  }
}
.block-hero__inner {
  align-self: center;
}
@media (min-width: 768px) {
  .block-hero__inner {
    grid-column: 1;
    grid-row: 1;
  }
}
.block-hero__media {
  position: relative;
}
@media (min-width: 768px) {
  .block-hero__media {
    grid-column: 2;
    grid-row: 1;
  }
}
.block-hero img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  transform: translate(-50%, -50%);
  mask-image: url("data:image/svg+xml,%3Csvg width='900' height='1000' viewBox='0 0 900 1000' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M891.984 502.434C840.683 772.464 703.245 1000 470.409 1000C237.574 1000 168.096 749.967 48.8492 502.434C-134.349 122.124 240.267 -30.1057 470.424 4.8674C716.683 42.2818 946.184 217.198 891.984 502.434Z' fill='%237BAB61'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.block-hero svg {
  overflow: visible;
}
.block-hero svg path {
  animation: rotate360 5s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.block-hero svg path:nth-child(1) {
  animation: rotate360 25s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.block-hero svg path:nth-child(2) {
  animation: rotate360 25s linear infinite; /* Different speed for variety */
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
