.container {
  &.journey {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding-top: 5.25rem;
    gap: 5.25rem;

    .journey-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 1em;
      text-align: center;

      h1 {
        display: inline-flex;
        gap: 0.5em;
        color: var(--color-display);
        font-size: var(--font-size-display);

        .counter {
          display: flex;
          align-items: center;
          gap: 0.125em;
          line-height: 1;
          font-family: var(--font-mono);
          pointer-events: none;
          user-select: none;

          .group {
            display: flex;
            gap: 0.125em;
          }

          .digit,
          .separator {
            position: relative;
            width: 2ch;
            height: 2ch;
            overflow: hidden;
            border-radius: 0.1875rem;
            background-color: var(--color-display);
            color: var(--background-color-primary);
            font-variant-numeric: tabular-nums;
          }

          .number {
            display: flex;
            position: absolute;
            align-items: center;
            justify-content: center;
            inset: 0;
          }
        }
      }

      p {
        margin-top: 0.25rem;
        color: var(--color-heading);
        font-weight: 600;
        font-size: 0.875rem;

        em {
          color: var(--color-display);
          font-style: normal;
          font-weight: 700;
          font-variant-numeric: tabular-nums;
        }
      }
    }

    ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      width: 100%;
      height: 90rem;
      margin: 0;
      padding: 0;
      gap: 0.75rem;
      list-style: none;

      .item {
        display: flex;
        flex-direction: column;
        max-width: 30%;
        padding: 1.5rem;
        gap: 1em;
        border-radius: 0.75rem;
        background-color: var(--background-color-secondary);
        line-height: 1.8;
        transition:
          transform 240ms var(--ease-elastic),
          background-color 240ms var(--ease-fluid);

        &:focus-within,
        &:hover {
          background-color: var(--background-color-tertiary);
        }

        &:nth-child(3n + 1) {
          order: 1;

          &:focus-within,
          &:hover {
            transform: rotate(1deg);
          }
        }

        &:nth-child(3n + 2) {
          order: 2;

          &:focus-within,
          &:hover {
            transform: translateY(-0.125rem);
          }
        }

        &:nth-child(3n) {
          order: 3;

          &:focus-within,
          &:hover {
            transform: rotate(-1deg);
          }
        }

        h3 {
          font-size: var(--font-size-body);
        }
      }
    }

    @media (max-width: 60rem) {
      padding-top: 4.125rem;
      gap: 4.125rem;

      .journey-hero {
        h1 {
          flex-direction: column;

          .counter {
            font-size: 1.5rem;
          }
        }
      }

      ul {
        height: auto;

        .item {
          width: 100%;
          max-width: 100%;
        }
      }
    }
  }
}
