.steps {
  container: steps / inline-size;

  .steps-list {
    >li {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: var(--sp-20);
      padding-block: var(--sp-40);
      border-block-start: var(--border);

      h2 {
        grid-column: span 3;
        margin-block-end: var(--sp-20);
      }

      p {
        grid-column: 4 / span 5;
      }

      img {
        grid-column: 12 / span 1;
        max-width: var(--sp-64);
        margin-inline-start: auto;
      }

      &:first-of-type {
        img {
          grid-column: 11 / span 2;
          max-width: 100%;
        }
      }

      @container (inline-size < 40.625rem) {
        h2,p,img {
          grid-column: span 12;
        }
        p {
          margin-block-end: var(--sp-40);
        }
        &:first-of-type {
          img {
            grid-column: span 12;
          }
        }
      }
    }
  }
}

.join-us {
  container: join-us / inline-size;

  inner-wrapper {
    padding-block-start: 0;
  }

  h2 {
    margin-block: var(--sp-40);
  }

  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--sp-200), 100%), 1fr));
    gap: var(--sp-20);
  }
}