site/landing/assets/scss/_benefits.scss

.benefits {
  padding: 5.375em 0 0.01em;
  position: relative;
  z-index: 20;
}

.benefit-list {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  padding-top: 10.5em;
  padding-bottom: 3em;
  padding-left: $m-s;
  padding-right: $m-s;
  margin-top: -10.5em;
}

.benefit {
  margin: 0 auto 10em;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: $max-width-m;

  &:nth-child(2n+1) {
    flex-direction: row-reverse;

    .benefit__decoration {
      left: auto;
      right: -13.625em;
      //animation-delay: -2s;
      //animation-direction: reverse;
    }
  }

  &__content {
    flex-basis: 0;
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr minmax(0, max-content) 1fr;
    min-width: 18em;
  }

  &__headline {
    margin-bottom: 0.46em;
    margin-top: 0;
    grid-column: 1/3;
  }

  &__body {
    max-width: 32ch;
    grid-column: 2/3;
  }

  &__image {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 18em;
    margin-bottom: 2em;
    margin-top: 1em;
    position: relative;
    z-index: 2;

    svg {
      display: block;
      max-width: 40vw;
      width: 13.625em;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .benefit__decoration {
      width: 35.5em;
      height: 35.5em;
      max-width: 60vw;
      position: absolute;
      left: -13.625em;
      top: -8.5em;
      z-index: -1;
      will-change: transform;
      //animation: rot 18s linear infinite;

      use {
        stroke-width: 1.5px;
      }
    }
  }


}

@keyframes rot {
  from {
    transform: rotate(0deg)
               translate(-3em)
               rotate(0deg);
  }
  to {
    transform: rotate(360deg)
               translate(-3em)
               rotate(-360deg);
  }
}