<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 ">
    <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">
    <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">
    <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">
    <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">
    <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 '@/core' as *;

.cards {
  $b: &;

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

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

  // Allow auto-fit wrapping before fixed columns kick in
  @include at(sm) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-column)), 1fr));
  }

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

  @include at(lg) {
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  // 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 {
    // Keep auto-fit on small screens, but center the rows
    @include at(sm) {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-column)), max-content));
      justify-content: center;
    }

    // 3 visual columns = 6 grid columns (default for -centered)
    @include at(md) {
      > .card {
        grid-column: span 2;
      }

      grid-template-columns: repeat(6, 1fr);

      // Center 1 or 2 orphans in a 3-column layout (works for any count)
      > .card:nth-child(3n + 1):nth-last-child(1) {
        grid-column: 3 / 5;
      }

      > .card:nth-child(3n + 1):nth-last-child(2) {
        grid-column: 2 / 4;
      }

      > .card:nth-child(3n + 2):nth-last-child(1) {
        grid-column: 4 / 6;
      }
    }

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

        // Center 1-3 orphans in a 4-column layout (works for any count)
        > .card:nth-child(4n + 1):nth-last-child(1) {
          grid-column: 4 / 6;
        }

        > .card:nth-child(4n + 1):nth-last-child(2) {
          grid-column: 3 / 5;
        }

        > .card:nth-child(4n + 2):nth-last-child(1) {
          grid-column: 5 / 7;
        }

        > .card:nth-child(4n + 1):nth-last-child(3) {
          grid-column: 2 / 4;
        }

        > .card:nth-child(4n + 2):nth-last-child(2) {
          grid-column: 4 / 6;
        }

        > .card:nth-child(4n + 3):nth-last-child(1) {
          grid-column: 6 / 8;
        }
      }
    }

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

        // Center 1-4 orphans in a 5-column layout (works for any count)
        > .card:nth-child(5n + 1):nth-last-child(1) {
          grid-column: 5 / 7;
        }

        > .card:nth-child(5n + 1):nth-last-child(2) {
          grid-column: 4 / 6;
        }

        > .card:nth-child(5n + 2):nth-last-child(1) {
          grid-column: 6 / 8;
        }

        > .card:nth-child(5n + 1):nth-last-child(3) {
          grid-column: 3 / 5;
        }

        > .card:nth-child(5n + 2):nth-last-child(2) {
          grid-column: 5 / 7;
        }

        > .card:nth-child(5n + 3):nth-last-child(1) {
          grid-column: 7 / 9;
        }

        > .card:nth-child(5n + 1):nth-last-child(4) {
          grid-column: 2 / 4;
        }

        > .card:nth-child(5n + 2):nth-last-child(3) {
          grid-column: 4 / 6;
        }

        > .card:nth-child(5n + 3):nth-last-child(2) {
          grid-column: 6 / 8;
        }

        > .card:nth-child(5n + 4):nth-last-child(1) {
          grid-column: 8 / 10;
        }
      }
    }
  }
}