@layer components {
  .flow {
    background-color: oklch(0.97 0.005 270);
    padding-block: 14cqi;
    padding-inline: 6cqi;
  }

  /* Title */
  .flow__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    margin-block-end: 8cqi;
  }

  .flow__title-sub {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    padding-block: 1.25cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent-light);
  }

  .flow__title-main {
    font-family: var(--font-hero);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent);
    text-align: center;
  }

  /* Steps */
  .flow__steps {
    display: flex;
    flex-direction: column;
    gap: 4cqi;
  }

  .flow__step {
    background-color: oklch(1 0 0);
    border: 3px solid var(--color-accent);
    border-radius: 2.5cqi;
    padding: 8cqi;
    overflow: hidden;
  }

  .flow__step--accent {
    background-color: var(--color-accent-light);
  }

  .flow__step-number {
    font-family: var(--font-hero);
    font-size: 6cqi;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-accent);
    margin-block-end: 2cqi;
  }

  .flow__step-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.6;
    color: oklch(0.13 0 0);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .flow__step--accent .flow__step-number,
  .flow__step--accent .flow__step-text {
    color: var(--color-accent);
  }

  .flow__step-text .flow__em-underline {
    font-weight: 800;
    text-decoration: underline;
  }

  .flow__step-texts {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
  }

  .flow__step-img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    margin-block-start: 3cqi;
    border-radius: 1.5cqi;
  }

  .flow__step-img--full {
    margin-block-end: -8cqi;
    border-radius: 0;
  }

  .flow__step-caption {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: oklch(0.5 0.2 265);
    border-radius: var(--radius-full);
    padding-block: 0.5cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 3cqi;
    font-weight: 700;
    line-height: 1.35;
    color: oklch(1 0 0);
    margin-block-start: 3cqi;
  }

  .flow__step-banner {
    display: block;
    inline-size: 100%;
    block-size: auto;
    margin-block-start: 4cqi;
    border-radius: 2cqi;
  }
}