/**
 * Section / Cards Modules
 * Grid of 6 feature module cards with varying layouts (2 columns)
 * Mobile-first responsive design
 */

/* Section uses .section-padding utility class from _utility.css */

.s-cards-modules {
  align-self: stretch;
}

.s-cards-modules__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem;
}

@media all and (min-width: 769px) {

.s-cards-modules__container {
    gap: 1.25rem
}
  }

@media all and (min-width: 1201px) {

.s-cards-modules__container {
    gap: 2.5rem
}
  }

/* Header */

.s-cards-modules__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  text-align: center;
  gap: 0.9375rem;
}

@media all and (min-width: 769px) {

.s-cards-modules__header {
    gap: 1.25rem
}
  }

/* Title uses .section-title utility class from _utility.css */

.s-cards-modules__description {
  color: #6a6c7e;
}

/* Grid - Mobile first: 1 column, then 2 columns with auto-sizing rows */

.s-cards-modules__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-self: stretch;
  gap: 1.25rem;
}

@media all and (min-width: 769px) {

.s-cards-modules__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 16.1875rem; /* Height of small card (variant right) */
    grid-auto-flow: dense /* Fill gaps automatically */
}
  }