#features {
  background: #f9f9f9;

  .feature-heading {
    margin-block-end: 1.6rem;
    line-height: 1;
    font-weight: 500;
    font-size: 6.4rem;

    @media screen and (max-width: 768px) {
      font-size:5rem;
    }
  }

  .feature-subheading {
    margin-block-end: 3.2rem;
    line-height: 1.4;
    letter-spacing: 0.12px;
  }

  ol {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    padding-block-end: 10rem;

    @media screen and (min-width: 768px) {
      gap: 0;
      padding: 0 !important;
      padding-block-end: 0rem;
    }
  }

  li {
    position: relative;
    display: flex;
    flex-direction: column;

    &:nth-child(1) {
      .feature-img {
        margin-left: 40%;
        margin-top: 10%;
      }

      @media screen and (min-width: 768px) {
        &::after {
          top: calc(100% - 11rem);
          transform: rotate(0) scaleX(1);
        }
      }
    }

    &:nth-child(2) {

      .feature-img {
        margin-left: -40%;
      }

      @media screen and (min-width: 768px) {
        margin-block: -15rem -20rem;

        &::after {
          top: calc(100% - 20rem);
          transform: rotate(0) scaleX(-1);
        }
      }

      @media screen and (min-width: 1200px) {
        .feature-img {
          max-height: 40rem;
          object-fit: contain;
          scale: 2.5;
        }
      }
    }

    &:nth-child(3) {
      margin-block-start: 6rem;

      .feature-img {
        margin-left: 30%;
      }

      /* Arrow */
      &::after {
        content: none;
      }
    }
  }

  /* Arrow */
  li::after {
    content: "";
    position: absolute;
    top: calc(100% + 2rem);
    aspect-ratio: 143 / 234;
    block-size: 100%;
    max-block-size: 14rem;
    right: calc(50% - 4.5rem);
    transform: rotate(-30deg) scaleX(1);
    background: var(--asset);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
  }

  @media screen and (min-width: 768px) {
    li::after {
      right: 50%;
    }
  }

  @media screen and (min-width: 1200px) {
    li::after {
      max-block-size: 23.4rem;
      top: calc(50% + 12rem) !important;
    }
  }

  /* Image Column */
  li > div:first-child {
    @media screen and (min-width: 768px) {
      padding: 0 !important;
    }
  }

  .feature-content {
    padding: 0;
    text-align: center;

    @media screen and (max-width: 767px) {
      margin-inline: auto;
    }

    @media screen and (min-width: 768px) {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin-block: auto;
      text-align: start;
    }
  }

  .feature-img {
    scale: 2;
    mix-blend-mode: darken;

    @media screen and (min-width: 768px) {
      scale: 1;
      inline-size: 100vw;
      margin: 0 !important;
    }
  }
}