.c-our-process {
  position: relative;
  display: flex;
  flex-wrap: wrap; }
  .c-our-process > * {
    flex: 1 1 450px; }
    .c-our-process > *ul {
      flex: 1 1 600px; }
  .c-our-process > ul {
    counter-reset: listCounter;
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-gap: 3em; }
    .c-our-process > ul li {
      position: relative;
      counter-increment: listCounter; }
      .c-our-process > ul li::before {
        content: counter(listCounter, decimal-leading-zero);
        font-size: 2rem;
        font-weight: 700;
        color: #999;
        line-height: 1;
        opacity: .2;
        pointer-events: none; }
      @media all and (min-width: 680px) {
        .c-our-process > ul li {
          padding-top: 3em; }
          .c-our-process > ul li::before {
            color: #afafaf;
            font-size: calc(1rem + 10vw);
            left: -2rem;
            top: -1rem;
            position: absolute; } }
    .c-our-process > ul h3 {
      color: var(--color-secondary-dark);
      text-transform: uppercase;
      letter-spacing: 0.01em;
      margin: 0 0 .5rem; }
    .c-our-process > ul p {
      color: #737373; }
  .c-our-process--inline {
    display: block; }
  .c-our-process--circle img {
    border-radius: 99rem;
    padding: .25rem;
    max-width: 70%;
    margin: 1rem auto;
    box-shadow: 1px 4px 4px 1px #9e9999; }
  .c-our-process--circle > ul li {
    padding: 0;
    text-align: center; }
    .c-our-process--circle > ul li::before {
      color: #fff;
      background: var(--color-secondary-base);
      font-size: .875rem;
      border-radius: 99rem;
      left: 50%;
      transform: translateX(calc(-50% + 0.25rem));
      top: .5rem;
      position: absolute;
      opacity: 1;
      padding: 1rem;
      box-shadow: 0 0 0 2px #fff; }