.features {
  text-align: center;
  padding-top: 0.01em;


  .feature-list {
    max-width: $max-width-xl;
    margin: 0 auto;

    &__item {
      max-width: 42ch;
      display: inline-block;
      vertical-align: top;
      text-align: left;
      margin: 0 1.875em 7.875em;
      position: relative;
      z-index: 2;

      a {
        color: $dark-purple;
        color: var(--text-color);

        &:hover,
        &:focus {
          text-decoration: none;
        }

        &:focus {
          outline: 1px dashed;
          outline-offset: 0.3em;
        }
      }

      &:before {
        content: "";
        position: absolute;
        left: -2.625em;
        top: -2.625em;
        width: 9.875em;
        height: 13.8125em;
        pointer-events: none;
        z-index: -1;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 221">/
          <path fill="none" fill-rule="evenodd" stroke="%2323BDE3" d="M7.9 217v-24h47.7V43L15.1 70.6 1 49.9 68.5 4H85v189h45.9v24z" opacity=".6"/>/
        </svg>')
      }

      &:nth-child(2):before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 221">/
        <path fill="none" fill-rule="evenodd" stroke="%2323BDE3" d="M8.8 218v-19.8l2.2-1.8c24.2-19.5 43.1-37 56.9-52.5 14.2-16 24.2-30.5 30.1-43.5 6-13 8.9-24.9 8.9-35.7 0-11.2-3.2-20-9.8-26.6A35.5 35.5 0 0071 28.4c-23.4 0-39.2 12.7-47.4 38.1L1 55.4A77 77 0 0127 17C39.5 7 54.8 2 73 2c12.2 0 23.1 2.4 32.7 7.2a53.6 53.6 0 0122.5 20.7c5.4 9 8.2 19.8 8.4 32.4 0 13.2-3 26.7-8.8 40.5A167 167 0 0199.3 146c-13.2 15-30.5 31-52.1 48H142v24H8.8z" opacity=".6"/>
      </svg>')
      }

      &:nth-child(3):before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 221">/
        <path stroke="%2323BDE3" d="M62 220c-12 0-23-2-34-4-10-3-19-7-25-11l8-26c6 4 14 8 23 10 9 3 19 4 30 4 14 0 25-3 34-9 9-7 13-16 13-28s-4-20-12-26c-9-6-20-9-33-9H53V97h9c14 0 26-4 34-10 7-7 11-16 11-28 0-9-3-17-9-23-7-6-16-9-27-9-12 0-22 4-30 10-8 7-13 16-17 29L1 54c5-15 13-28 26-38C39 6 55 1 73 1c13 0 25 2 34 7 10 5 17 12 22 20 5 9 8 18 8 29s-3 21-10 30c-6 9-14 16-25 20 12 4 22 10 29 18 6 9 10 19 10 32 0 19-7 34-21 46a90 90 0 01-58 17z" fill="none" fill-rule="evenodd" opacity=".6"/>
      </svg>')
      }

      &:nth-child(4):before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 221">/
        <path stroke="%2323BDE3" d="M99 218v-59H1v-21L107 4h20v131h30v24h-30v59H99zm-67-83l67-85v85H32z" fill="none" fill-rule="evenodd" opacity=".6"/>
      </svg>')
      }

      &:nth-child(5):before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 221">/
        <path stroke="%2323BDE3" d="M60 219c-11 0-22-2-33-4-11-3-19-7-26-12l8-25 23 10c9 3 19 4 30 4 15 0 26-3 35-10 8-7 13-17 13-30s-5-22-15-29-26-11-50-12l-31-1L22 3h107v24H49l-4 59h6c30 1 53 7 67 19s21 27 21 46c0 14-3 26-9 36-7 10-16 18-28 23-12 6-26 9-42 9z" fill="none" fill-rule="evenodd" opacity=".6"/>
      </svg>')
      }

      &:nth-child(6):before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 221">/
        <path stroke="%2323BDE3" d="M78 220c-25 0-44-9-57-26S1 152 1 118c0-24 3-44 10-62 7-17 17-31 29-40C53 6 68 1 86 1c31 0 53 16 64 47l-25 12c-4-12-9-20-16-25s-15-8-25-8c-16 0-28 7-39 22-10 14-15 35-15 63v2c6-10 13-17 23-23 9-5 20-8 33-8 12 0 22 2 32 8 10 5 17 12 23 22 5 10 8 21 8 34 0 14-3 26-9 37s-14 20-25 26c-11 7-23 10-37 10zm-1-25c-13 0-23-4-30-11-8-8-12-18-12-32 0-9 2-16 6-23s9-12 16-16c6-4 14-5 22-5 13 0 22 3 30 11 7 8 11 18 11 31s-4 24-12 32c-8 9-18 13-31 13z" fill="none" fill-rule="evenodd" opacity=".6"/>
      </svg>')
      }
    }
  }

}