/* Finding the mass in SolidWorks: four steps with a screenshot each, in a
   row on a wide screen, two by two between, one under the other on a phone.
   On the home page and the help page. */
@layer components {
  .guide__intro {
    max-inline-size: 72ch;
    padding: calc(var(--block-space) * 1.25) calc(var(--inline-space) * 2.5) 0;
    color: var(--color-ink-dim);
  }

  .guide__steps {
    display: grid;
    gap: calc(var(--block-space) * 1.5) calc(var(--inline-space) * 4);
    padding: calc(var(--block-space) * 1.25) calc(var(--inline-space) * 2.5) calc(var(--block-space) * 1.5);
    list-style: none;

    @media (min-width: 36rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (min-width: 72rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .guide__step {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: calc(var(--block-space) * 0.5);
  }

  .guide__text {
    max-inline-size: 48ch;
    color: var(--color-ink-dim);
    font-size: var(--text-sm);
  }

  /* A screenshot is SolidWorks's own light grey whatever the theme, so it
     sits in a hairline frame, never wider than itself. */
  .guide__shot {
    max-inline-size: min(100%, 24rem);
    block-size: auto;
    margin-block-start: calc(var(--block-space) * 0.25);
    border: var(--rule-width) solid var(--color-hairline);
  }
}