.feature-list {
  .feature {
    position: relative;
    padding: 2rem 1rem;
    color: var(--color-white);
    background-color: var(--color-green);
    transition: all 0.3s;

    .feature-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      user-select: none;
      opacity: 0;
      transition: all 0.3s;
    }
    .feature-number {
      position: relative;
      font-size: 5rem;
      font-weight: 600;
      color: var(--color-gray);
      line-height: 0.8;
    }
    .feature-title {
      position: relative;
      font-family: var(--font-primary);
      font-weight: 600;
      text-transform: uppercase;
      color: var(--color-white);
      margin-bottom: 1rem;
    }
    .feature-excerpt {
      position: relative;
      text-wrap: pretty;
    }

    &:hover {
      background-color: var(--color-black);
      .feature-image {
        opacity: 0.5;
      }
    }

    @media (width >= 768px) {
      padding: 3rem 2rem;
      .feature-number {
        font-size: 8.5rem;
      }
    }
    @media (width >= 1200px) {
      padding: 3rem 5rem;
    }
  }
}