le-courage-du-reel/assets/css/src/_section_5-handles.scss

section#handles {
  margin: 5rem var(--padding-body);
  display: flex;
  flex-direction: column;
  align-items: center;

  header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;

    .title-wrapper {
      .index {
        @include section-title;
        font-weight: 500;
      }
      .title {
        @include big-title-medium-blue;
      }
    }
    .subtitle {
      font-weight: 500;
      margin-right: 7vw;
    }
  }

  .path {
    margin-top: 7.5rem;
    width: 42rem;
    .step {
      box-sizing: border-box;
      width: min(100%, 20rem);
      padding: 1rem 2rem;
      border-radius: var(--radius-section);
      border: 1px solid var(--color-blue);
      color: var(--color-blue);
      font-size: var(--font-size-s);

      font-weight: 500;

      h4 {
        text-transform: uppercase;
        margin-bottom: 0.7rem;
      }
    }
    .step:hover {
      background-color: var(--color-blue);
      color: #fff;
    }
    .step:nth-child(even) {
      margin-left: 22rem;
    }
    .step:not(:last-child) {
      margin-bottom: 2rem;
    }
  }
}