/* ============================================================
   Popular Courses & Workshops - homepage brief 4.5 (Page Sections
   layout "popular_offerings"; notes home-desktop 3.7, home-mobile
   3.7). Cream section (.section--cream): the shared section header
   with the "View all courses & workshops" link aside (main.css),
   then the offering cards (offering-card.css; the list also carries
   .offering-card-grid, which keeps dividers level in a row).
   - Phones (< 768): one column of inset cards, 42px from the screen
     edges (--inset-card-mobile: 318 wide at 402), capped at 416px and
     centred on wider phones so a card never balloons; 36px apart.
   - Tablet (768-1023): a 2 x 2 grid, 36px gaps (329-444px cards),
     the link under the intro (main.css); photos keep the desktop
     ratio.
   - Desktop (>= 1024): four equal columns; the link sits right of the
     intro, bottom-aligned, ending at the container's right edge (the
     design's x 1317 normalised, brief 12). Below 1200 the gaps are
     20px (--gap-grid) so the narrowest cards stay 214-252px wide
     (their "View" moves under the price below 240px, on every card,
     offering-card.css); from 1200 the designed 36px. At 1440 the
     cards are 293px wide: 458 tall with the designed copy, a little
     taller with Doc 01's longer summaries (480 with the seeded four,
     whose longest summary runs to four lines).
   Cards in a row share one height (QH25). The design's 81px bottom
   padding is normalised to the section padding (brief 12, QH7).
   ============================================================ */

.popular-offerings__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--gap-cards);
	margin: 0;
	padding: 0 calc(var(--inset-card-mobile) - var(--gutter));
	list-style: none;
}

/* A grid cell, so the card inside stretches to the row height. */
.popular-offerings__item {
	display: grid;
	width: 100%;
	max-width: 26rem;
}

/* ============================================================
   Tablet: 2 x 2
   ============================================================ */

@media (min-width: 768px) {
	.popular-offerings__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0;
	}

	.popular-offerings__item {
		max-width: none;
	}
}

/* ============================================================
   Desktop: four columns (20px gaps below 1200, 36px from 1200)
   ============================================================ */

@media (min-width: 1024px) {
	.popular-offerings__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap-grid);
	}
}

@media (min-width: 1200px) {
	.popular-offerings__list {
		gap: var(--gap-cards);
	}
}