/* ========================================================================================
 * icon-list.css - .icon-list > li > .icon-list__icon + text (L2 layer).
 * Ported from .cd-list (docs/design-source/homepage-template.html, search ".cd-list").
 * ======================================================================================== */

.icon-list{display:flex;flex-direction:column;gap:var(--cd-5);margin:0;padding:0;list-style:none}
.icon-list > li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--cd-4);align-items:start}
.icon-list__icon{width:24px;height:24px;fill:none;stroke:var(--cd-teal-500);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.icon-list > li h3{font-size:var(--cd-body);line-height:1.35;letter-spacing:-.01em;font-weight:700;margin-bottom:var(--cd-1)}
.icon-list > li p{font-size:var(--cd-small);line-height:1.55;max-width:56ch}

/* --2col: the list in two columns from 768px (course "Reserve your seat" benefits, owner
 * feedback 25-four-blurbs.png). On a deep ground or photo (.on-dark) the icons and copy go
 * light so they read on the dimmed photo. */
@media (min-width:768px){.icon-list--2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--cd-7);row-gap:var(--cd-5)}}
.on-dark .icon-list__icon{stroke:var(--cd-teal-300)}
.on-dark .icon-list > li h3{color:var(--cd-white)}
.on-dark .icon-list > li p{color:var(--cd-ink-invert-muted)}
.icon-list--2col{width:100%;max-width:1000px}