<h2>Cards - Centered Orphans</h2>
<p>The <code>-centered</code> modifier uses a doubled grid column count with <code>nth-child</code> positioning to center orphan cards in the last row.</p>

<section class="section container">
  <h3>4 Cards (<code>-centered</code>) - 3 + 1 layout</h3>
  <p>4 cards in a 3-column layout: first row full, single orphan centered below.</p>
  <div class="cards -centered -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card One</span>
        <p class="card__description">Row 1 of 3 cards.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=70" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Two</span>
        <p class="card__description">Row 1 of 3 cards.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=71" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Three</span>
        <p class="card__description">Row 1 of 3 cards.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=72" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Four</span>
        <p class="card__description">Centered orphan (1 of 1).</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=73" alt="" class="card__image">
      </div>
    </div>
  </div>
</section>

<section class="section container">
  <h3>5 Cards (<code>-centered</code>) - 3 + 2 layout</h3>
  <p>5 cards in a 3-column layout: first row full, 2 orphans centered below.</p>
  <div class="cards -centered -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card One</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=80" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Two</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=81" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Three</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=82" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Four</span>
        <p class="card__description">Centered orphan (1 of 2).</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=83" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Five</span>
        <p class="card__description">Centered orphan (2 of 2).</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=84" alt="" class="card__image">
      </div>
    </div>
  </div>
</section>

<section class="section container">
  <h3>6 Cards (<code>-columns-4 -centered</code>) - 4 + 2 layout</h3>
  <p>6 cards in a 4-column layout: first row full, 2 orphans centered below.</p>
  <div class="cards -columns-4 -centered -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card One</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=90" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Two</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=91" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Three</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=92" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Four</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=93" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Five</span>
        <p class="card__description">Centered orphan (1 of 2).</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=94" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Six</span>
        <p class="card__description">Centered orphan (2 of 2).</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=95" alt="" class="card__image">
      </div>
    </div>
  </div>
</section>

<section class="section container">
  <h3>7 Cards (<code>-columns-4 -centered</code>) - 4 + 3 layout</h3>
  <p>7 cards in a 4-column layout: first row full, 3 orphans centered below.</p>
  <div class="cards -columns-4 -centered -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card One</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=100" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Two</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=101" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Three</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=102" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Four</span>
        <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=103" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Five</span>
        <p class="card__description">Centered orphan (1 of 3).</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=104" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Six</span>
        <p class="card__description">Centered orphan (2 of 3).</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=105" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Seven</span>
        <p class="card__description">Centered orphan (3 of 3).</p>
        <a href="#" class="card__cta link -wide">
          Learn More
          <svg class="card__ctaIcon link__icon">
            <use href="/main-icons-sprite.svg#arrow-right" />
          </svg>
        </a>
      </div>
      <div class="card__imageWrapper">
        <img src="https://unsplash.it/600/337?random=106" alt="" class="card__image">
      </div>
    </div>
  </div>
</section>

<section class="section container">
    <h3>8 Cards (<code>-columns-5 -centered</code>) - 5 + 3 layout</h3>
    <p>8 cards in a 5-column layout: first row full, 3 orphans centered below.</p>
    <div class="cards -columns-5 -centered -stretch">
      <div class="card">
        <div class="card__content">
          <span class="card__title h3">Card One</span>
          <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
          <a href="#" class="card__cta link -wide">
            Learn More
            <svg class="card__ctaIcon link__icon">
              <use href="/main-icons-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
        <div class="card__imageWrapper">
          <img src="https://unsplash.it/600/337?random=100" alt="" class="card__image">
        </div>
      </div>
      <div class="card">
        <div class="card__content">
          <span class="card__title h3">Card Two</span>
          <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
          <a href="#" class="card__cta link -wide">
            Learn More
            <svg class="card__ctaIcon link__icon">
              <use href="/main-icons-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
        <div class="card__imageWrapper">
          <img src="https://unsplash.it/600/337?random=101" alt="" class="card__image">
        </div>
      </div>
      <div class="card">
        <div class="card__content">
          <span class="card__title h3">Card Three</span>
          <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
          <a href="#" class="card__cta link -wide">
            Learn More
            <svg class="card__ctaIcon link__icon">
              <use href="/main-icons-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
        <div class="card__imageWrapper">
          <img src="https://unsplash.it/600/337?random=102" alt="" class="card__image">
        </div>
      </div>
      <div class="card">
        <div class="card__content">
          <span class="card__title h3">Card Four</span>
          <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
          <a href="#" class="card__cta link -wide">
            Learn More
            <svg class="card__ctaIcon link__icon">
              <use href="/main-icons-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
        <div class="card__imageWrapper">
          <img src="https://unsplash.it/600/337?random=103" alt="" class="card__image">
        </div>
      </div>
      <div class="card">
        <div class="card__content">
          <span class="card__title h3">Card Five</span>
          <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.</p>
          <a href="#" class="card__cta link -wide">
            Learn More
            <svg class="card__ctaIcon link__icon">
              <use href="/main-icons-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
        <div class="card__imageWrapper">
          <img src="https://unsplash.it/600/337?random=104" alt="" class="card__image">
        </div>
      </div>
      <div class="card">
        <div class="card__content">
          <span class="card__title h3">Card Six</span>
          <p class="card__description">Centered orphan (1 of 3).</p>
          <a href="#" class="card__cta link -wide">
            Learn More
            <svg class="card__ctaIcon link__icon">
              <use href="/main-icons-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
        <div class="card__imageWrapper">
          <img src="https://unsplash.it/600/337?random=105" alt="" class="card__image">
        </div>
      </div>
      <div class="card">
        <div class="card__content">
          <span class="card__title h3">Card Seven</span>
          <p class="card__description">Centered orphan (2 of 3).</p>
          <a href="#" class="card__cta link -wide">
            Learn More
            <svg class="card__ctaIcon link__icon">
              <use href="/main-icons-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
        <div class="card__imageWrapper">
          <img src="https://unsplash.it/600/337?random=106" alt="" class="card__image">
        </div>
      </div>
      <div class="card">
        <div class="card__content">
          <span class="card__title h3">Card Seven</span>
          <p class="card__description">Centered orphan (3 of 3).</p>
          <a href="#" class="card__cta link -wide">
            Learn More
            <svg class="card__ctaIcon link__icon">
              <use href="/main-icons-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
        <div class="card__imageWrapper">
          <img src="https://unsplash.it/600/337?random=106" alt="" class="card__image">
        </div>
      </div>
    </div>
  </section>

@use "@imarc/pronto/resources/styles/imported" as *;

.cards {
  $b: &;

  --columns: 1;
  --gap: var(--root-gap, 16px);

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--columns), 1fr);

  // Responsive defaults: 1 mobile, 2 tablet+
  @include at(md) {
    --columns: 2;
  }

  // Column modifiers (2-5 columns on tablet+)
  @for $i from 2 through 5 {
    &.-columns-#{$i} {
      @include at(md) {
        --columns: #{$i};
      }
    }
  }


  // Center orphan cards using doubled grid columns
  // Cards span 2 columns, orphans positioned to center
  &.-centered {
    > .card {
      grid-column: span 2;
    }

    // 3 visual columns = 6 grid columns (default for -centered)
    @include at(md) {
      grid-template-columns: repeat(6, 1fr);

      // 4 cards (3 + 1): center the orphan
      > .card:nth-child(4):nth-last-child(1) {
        grid-column: 3 / 5;
      }

      // 5 cards (3 + 2): center the 2 orphans
      > .card:nth-child(4):nth-last-child(2) {
        grid-column: 2 / 4;
      }
      > .card:nth-child(5):nth-last-child(1) {
        grid-column: 4 / 6;
      }
    }

    // 4 visual columns = 8 grid columns
    &.-columns-4 {
      @include at(md) {
        grid-template-columns: repeat(8, 1fr);

        // Reset 3-column orphan positioning
        > .card:nth-child(4):nth-last-child(1),
        > .card:nth-child(4):nth-last-child(2),
        > .card:nth-child(5):nth-last-child(1) {
          grid-column: span 2;
        }

        // 5 cards (4 + 1): center the orphan
        > .card:nth-child(5):nth-last-child(1) {
          grid-column: 4 / 6;
        }

        // 6 cards (4 + 2): center the 2 orphans
        > .card:nth-child(5):nth-last-child(2) {
          grid-column: 3 / 5;
        }
        > .card:nth-child(6):nth-last-child(1) {
          grid-column: 5 / 7;
        }

        // 7 cards (4 + 3): center the 3 orphans
        > .card:nth-child(5):nth-last-child(3) {
          grid-column: 2 / 4;
        }
        > .card:nth-child(6):nth-last-child(2) {
          grid-column: 4 / 6;
        }
        > .card:nth-child(7):nth-last-child(1) {
          grid-column: 6 / 8;
        }
      }
    }

    // 5 visual columns = 10 grid columns
    &.-columns-5 {
      @include at(md) {
        grid-template-columns: repeat(10, 1fr);

        // Reset previous orphan positioning
        > .card:nth-child(4):nth-last-child(1),
        > .card:nth-child(4):nth-last-child(2),
        > .card:nth-child(5):nth-last-child(1),
        > .card:nth-child(5):nth-last-child(2),
        > .card:nth-child(5):nth-last-child(3),
        > .card:nth-child(6):nth-last-child(1),
        > .card:nth-child(6):nth-last-child(2),
        > .card:nth-child(7):nth-last-child(1) {
          grid-column: span 2;
        }

        // 6 cards (5 + 1): center the orphan
        > .card:nth-child(6):nth-last-child(1) {
          grid-column: 5 / 7;
        }

        // 7 cards (5 + 2): center the 2 orphans
        > .card:nth-child(6):nth-last-child(2) {
          grid-column: 4 / 6;
        }
        > .card:nth-child(7):nth-last-child(1) {
          grid-column: 6 / 8;
        }

        // 8 cards (5 + 3): center the 3 orphans
        > .card:nth-child(6):nth-last-child(3) {
          grid-column: 3 / 5;
        }
        > .card:nth-child(7):nth-last-child(2) {
          grid-column: 5 / 7;
        }
        > .card:nth-child(8):nth-last-child(1) {
          grid-column: 7 / 9;
        }

        // 9 cards (5 + 4): center the 4 orphans
        > .card:nth-child(6):nth-last-child(4) {
          grid-column: 2 / 4;
        }
        > .card:nth-child(7):nth-last-child(3) {
          grid-column: 4 / 6;
        }
        > .card:nth-child(8):nth-last-child(2) {
          grid-column: 6 / 8;
        }
        > .card:nth-child(9):nth-last-child(1) {
          grid-column: 8 / 10;
        }
      }
    }
  }
}