.v16-root .v21-courses{
  /* the V21 palette, as the mockup's own cascade computes it */
  --c21-ink:#173146;
  --c21-kicker:#657887;
  --c21-card-line:#cbd7e0;
  --c21-card:#eef4f8;
  --c21-card-met:#f3f0ea;
  --c21-card-reg:#edf1ea;
  --c21-card-shadow:#122e4210;
  --c21-image-ground:#c4d1dd;
  --c21-fact:#58758a;
  --c21-arrow:#637f90;
  --c21-soon:#e5e8e7;
  --c21-soon-ink:#64716e;
  color:var(--c21-ink)}

/* ————— the page header: the kicker over the title ————— */
.v16-root .v21-courses .hd{min-height:58px;margin-bottom:24px}
.v16-root .v21-courses .hd .kick{font-size:12px;font-weight:450;letter-spacing:0;
  color:var(--c21-kicker);margin:0 0 9px}
.v16-root .v21-courses .hd h1{margin:0;font-size:32px;font-weight:570;letter-spacing:-1.1px;
  line-height:1.18;color:var(--c21-ink)}

/* ————— the three illustrated subject cards ————— */
.v16-root .v21-courses .c21-subjects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px}
.v16-root .v21-courses .c21-subject{display:block;border:1px solid var(--c21-card-line);
  background:var(--c21-card);border-radius:13px;overflow:hidden;color:inherit;
  text-decoration:none;transition:transform .18s,box-shadow .18s}
.v16-root .v21-courses .c21-subject:hover{transform:translateY(-2px);
  box-shadow:0 7px 18px var(--c21-card-shadow)}
.v16-root .v21-courses .c21-subject.aviation-meteorology{background:var(--c21-card-met)}
.v16-root .v21-courses .c21-subject.air-regulations{background:var(--c21-card-reg)}
.v16-root .v21-courses .c21-subject-art{aspect-ratio:3/2;background:var(--c21-image-ground)}
.v16-root .v21-courses .c21-subject-art img{width:100%;height:100%;object-fit:contain;display:block}
.v16-root .v21-courses .c21-subject-info{padding:25px 23px}
.v16-root .v21-courses .c21-subject-info h2{font-size:23px;font-weight:570;letter-spacing:-.6px;
  line-height:1.25;min-height:58px;margin:0 0 16px}
.v16-root .v21-courses .c21-subject-info > div{display:flex;justify-content:space-between;
  align-items:center;gap:12px}
.v16-root .v21-courses .c21-course-fact{color:var(--c21-fact);font-size:12px}
.v16-root .v21-courses .c21-subject-info .icon{color:var(--c21-arrow);width:18px;height:19px;
  flex-shrink:0}
.v16-root .v21-courses .c21-soon{display:inline-flex;padding:6px 10px;background:var(--c21-soon);
  color:var(--c21-soon-ink);border-radius:6px;font-size:11px;font-weight:450}

@media(max-width:1100px){
  .v16-root .v21-courses .c21-subject-info{padding:23px 19px}
  .v16-root .v21-courses .c21-subject-info h2{font-size:22px}
}

@media(max-width:900px){
  .v16-root .v21-courses .c21-subjects{grid-template-columns:1fr}
  .v16-root .v21-courses .c21-subject{display:grid;grid-template-columns:42% 1fr;
    align-items:stretch}
  .v16-root .v21-courses .c21-subject-art{display:flex;align-items:center;aspect-ratio:auto}
  .v16-root .v21-courses .c21-subject-art img{height:auto;aspect-ratio:3/2}
  .v16-root .v21-courses .c21-subject-info{display:flex;flex-direction:column;
    justify-content:center;padding:25px}
  .v16-root .v21-courses .c21-subject-info h2{min-height:0;font-size:27px;margin-bottom:25px}
}

@media(max-width:600px){
  .v16-root .v21-courses .hd{min-height:0;margin-bottom:22px}
  .v16-root .v21-courses .hd .kick{font-size:11px}
  .v16-root .v21-courses .hd h1{font-size:30px;letter-spacing:-1px}
  .v16-root .v21-courses .c21-subjects{gap:22px}
  .v16-root .v21-courses .c21-subject{display:block}
  .v16-root .v21-courses .c21-subject-art{aspect-ratio:3/2;display:block}
  .v16-root .v21-courses .c21-subject-art img{height:100%}
  .v16-root .v21-courses .c21-subject-info{padding:24px}
  .v16-root .v21-courses .c21-subject-info h2{font-size:26px;margin-bottom:21px}
  .v16-root .v21-courses .c21-soon{font-size:11px}
  .v16-root .v21-courses .c21-course-fact{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .v16-root .v21-courses .c21-subject{transition:none}
}