/*
 * multiple_course_lists — written from the design (kitchen-sink .tabs + the
 * .courses rows shown inside each tab). This block only chooses a container
 * (tabs / accordion / columns / rows) and drops the shared course list inside.
 *
 * Ownership, to avoid redefining anything twice:
 *   - the inner course lists (ul.course-cards*) are owned by courses.css
 *     (rows for list style, card grid for 3grid/4grid). Nothing here.
 *   - the tabs chrome (.tabbed / .tabbed-menu) is owned by tabbed_content.css.
 *   - the accordion chrome (.accordion*) is owned by accordion.css.
 *   - .content-area / .pad / .bg-* is owned by bridge.css.
 * This file is the delta for the two layouts that are unique to this block:
 * the side-by-side Columns and Rows arrangements of several lists.
 * Colour is always a token.
 */

.multiple-course-lists-columns,
.multiple-course-lists-columns-rows {
  display: grid;
  gap: 2.6rem var(--gap-grid-lg);
  grid-template-columns: 1fr;
}

@media print, screen and (min-width: 48em) {
  .multiple-course-lists-columns,
  .multiple-course-lists-columns-rows {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* each list keeps its own heading tight to the list it introduces */
.multiple-course-lists-columns > .columns > h3,
.multiple-course-lists-columns-rows > .columns > h3 {
  margin-bottom: 0.8rem;
}