.course-for-you-if__layout {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;

  gap: var(--gap-content-to-cta);
  padding-bottom: var(--section-spacing);
  padding-inline: var(--section-padding-x);
}
.course-for-you-if__layout--desktop { display: flex; }
.course-for-you-if__layout--mobile { display: none; }

@media (max-width: 988px) {
  .course-for-you-if__layout {
    padding-inline: var(--section-padding-x-mobile);
  }
}

.course-for-you-if__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;

  gap: var(--section-name-to-section);
}

.course-for-you-if__title { width: 100%; }

/* Width-based, not per-layout-block: the 2-up vertical tier renders the
   mobile block at desktop widths, so a per-block radius jumped at 1326. */
.course-for-you-if__card { border-radius: var(--radius-medium); }
@media (max-width: 988px) {
  .course-for-you-if__card { border-radius: var(--radius-medium-mobile); }
}

.course-for-you-if__layout--desktop .course-for-you-if__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;

  gap: clamp(10px, calc(0.541px + 1.35135vw), 20px);
}
.course-for-you-if__layout--desktop .course-for-you-if__card {
  display: flex;
  align-items: center;

  justify-content: space-between;
  background: var(--color-cards-bg);

  padding-left: clamp(30px, calc(1.622px + 4.05405vw), 60px);

  gap: clamp(20px, calc(-34.865px + 7.83784vw), 78px);
}
.course-for-you-if__layout--desktop .course-for-you-if__card-title {
  margin: 0;

  flex: 0 0 15.5ch;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h3-card-xs-for-you-if);
  line-height: 1.2;
}
.course-for-you-if__layout--desktop .course-for-you-if__card-media {
  flex: 0 0 16rem;
  aspect-ratio: var(--cfyi-media-ratio, 900 / 812);
  border-radius: inherit;
  overflow: hidden;
}

@media (max-width: 1325.98px) {
  .course-for-you-if__layout--desktop .course-for-you-if__cards {
    grid-template-columns: 1fr;
  }
  .course-for-you-if__layout--desktop .course-for-you-if__card {
    gap: clamp(10px, calc(-32.54px + 7.6605vw), 69.04px);
  }

  .course-for-you-if__layout--desktop { display: none; }
  .course-for-you-if__layout--mobile { display: flex; }
}

/* 758.77 is derived from the real 324px illustration anchor, not from
   fit math — recompute if that anchor or the card gap changes. */
@media (max-width: 758.77px) {
  .course-for-you-if__layout--desktop { display: flex; }
  .course-for-you-if__layout--mobile { display: none; }
}

@media (max-width: 555.24px) {
  .course-for-you-if__layout--desktop { display: none; }
  .course-for-you-if__layout--mobile { display: flex; }
}

.course-for-you-if__layout--mobile .course-for-you-if__cards {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}
.course-for-you-if__layout--mobile .course-for-you-if__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: var(--color-cards-bg);

  padding: 24px 0 0 30px;
  gap: 19px;
  overflow: hidden;
}
.course-for-you-if__layout--mobile .course-for-you-if__card-title {
  margin: 0;

  width: 15.5ch;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h3-card-xs-for-you-if);
  line-height: 1.2;
}
.course-for-you-if__layout--mobile .course-for-you-if__card-media {
  width: 100%;
  max-width: 324px;
  align-self: flex-end;
  aspect-ratio: var(--cfyi-media-ratio, 900 / 812);
  border-radius: inherit;
  overflow: hidden;
}

.course-for-you-if__card-media img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* These two blocks MUST stay below the mobile block's own base
   .course-for-you-if__cards rule — same specificity, later rule wins.
   Moved up, they silently stop applying and the 2-up grid disappears. */
@media (max-width: 1325.98px) {
  .course-for-you-if__layout--mobile .course-for-you-if__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: clamp(10px, calc(0.541px + 1.35135vw), 20px);
  }
}
@media (max-width: 555.24px) {
  .course-for-you-if__layout--mobile .course-for-you-if__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Stacked: 324 wide at the tier's top down to 266 at 390 — her 240px
     height through the 900/812 ratio. Must stay after the base rule. */
  .course-for-you-if__layout--mobile .course-for-you-if__card-media {
    width: min(clamp(266px, calc(129.11px + 35.1vw), 324px), 100%);
  }
}