<h2>Cards Grid</h2>
<p>The <code>.cards</code> component displays a collection of card molecules in a responsive grid layout. Mobile: 1 column, Tablet & Desktop: 2 columns by default (configurable with .-columns-N modifiers)</p>

<section class="section container">
  <h3>Default Grid (2 columns on tablet &amp; desktop)</h3>
  <div class="cards -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Title One</span>
        <p class="card__description">
          Without a count modifier, cards default to 2 columns on tablet and desktop.
        </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=1" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card Title Two</span>
        <p class="card__description">
          Without a count modifier, cards default to 2 columns on tablet and desktop.
        </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=2" alt="" class="card__image">
      </div>
    </div>
  </div>
</section>

<section class="section container">
  <h3>Two Columns (<code>.-columns-2</code>)</h3>
  <div class="cards -columns-2 -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">First Card</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=4" alt="" class="card__image">
      </div>
    </div>
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Second Card</span>
        <p class="card__description">
          Aenean ac porta nisl. Ut eu bibendum nisi. Vestibulum et consectetur arcu.
        </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=5" alt="" class="card__image">
      </div>
    </div>
  </div>
</section>

<section class="section container">
  <h3>Three Columns (<code>.-columns-3</code>) - 6 cards shown</h3>
  <div class="cards -columns-3 -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card One</span>
        <p class="card__description">
          3 columns on desktop. Extra cards flow to next row.
        </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=31" 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">
          3 columns on desktop. Extra cards flow to next row.
        </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=32" 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">
          3 columns on desktop. Extra cards flow to next row.
        </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=33" 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">
          3 columns on desktop. Extra cards flow to next row.
        </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=34" 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">
          3 columns on desktop. Extra cards flow to next row.
        </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=35" 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">
          3 columns on desktop. Extra cards flow to next row.
        </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=36" alt="" class="card__image">
      </div>
    </div>
  </div>
</section>

<section class="section container">
  <h3>Four Columns (<code>.-columns-4</code>) - 7 cards shown</h3>
  <div class="cards -columns-4 -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card One</span>
        <p class="card__description">
          4 columns on desktop. Orphan cards align left.
        </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=6" 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">
          4 columns on desktop. Orphan cards align left.
        </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=7" 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">
          4 columns on desktop. Orphan cards align left.
        </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=8" 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">
          4 columns on desktop. Orphan cards align left.
        </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=9" 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">
          4 columns on desktop. Orphan cards align left.
        </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=37" 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">
          4 columns on desktop. Orphan cards align left.
        </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=38" 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">
          This orphan card stays its natural width, aligned left.
        </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=39" alt="" class="card__image">
      </div>
    </div>
  </div>
</section>

<section class="section container">
  <h3>Five Columns (<code>.-columns-5</code>)</h3>
  <div class="cards -columns-5 -stretch">
    <div class="card">
      <div class="card__content">
        <span class="card__title h3">Card One</span>
        <p class="card__description">
          Five equal-width cards in a row on desktop.
        </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=10" 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">
          Five equal-width cards in a row on desktop.
        </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=11" 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">
          Five equal-width cards in a row on desktop.
        </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=12" 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">
          Five equal-width cards in a row on desktop.
        </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=13" 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">
          Five equal-width cards in a row on desktop.
        </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=14" 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;
        }
      }
    }
  }
}