.curriculum {
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing);
}
@media (max-width: 988px) {
  .curriculum { padding-inline: var(--section-padding-x-mobile); }
}

.curriculum__description {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(16px, calc(10.324px + 0.81081vw), 22px);
  line-height: 1.3;
  /* 752px at the real 22px; holds the 2-line wrap. */
  max-width: 53.2ch;
}

.curriculum__columns {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, calc(0.541px + 1.35135vw), 20px);
  margin-top: var(--section-name-to-section);
}

.curriculum__column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(0.541px + 1.35135vw), 20px);
}

.curriculum__card {
  background: var(--color-cards-bg);
  border-radius: 20px;
  padding: 8px 8px 8px clamp(16px, calc(2.757px + 1.89189vw), 30px);
}
@media (max-width: 988px) {
  .curriculum__card { border-radius: 16px; }
}

.curriculum__card-heading {
  margin: 0;
  font: inherit;
}

.curriculum__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.curriculum__card-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.curriculum__card-title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h5-curriculum);
  line-height: 1.1;
}

.curriculum__card-icon {
  flex: none;
  width: clamp(70px, calc(32.162px + 5.40541vw), 110px);
  height: clamp(70px, calc(32.162px + 5.40541vw), 110px);
}
.curriculum__card-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.curriculum__card-plus {
  flex: none;
  align-self: flex-start;
  position: relative;
  width: clamp(25px, calc(20.27px + 0.67568vw), 30px);
  height: clamp(25px, calc(20.27px + 0.67568vw), 30px);
  /* 10 + 2 = the 12px gap Figma keeps before the button. */
  margin-left: 2px;
  border-radius: 50%;
  background: var(--color-bg);
  transition: transform 0.3s ease;
}
.curriculum__card-plus::before,
.curriculum__card-plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 53.4%;
  height: 1px;
  background: var(--color-text);
  transform: translate(-50%, -50%);
}
.curriculum__card-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.curriculum__card.is-open .curriculum__card-plus {
  transform: rotate(45deg);
}

.curriculum__topics {
  margin: clamp(8px, calc(6.108px + 0.27027vw), 10px) 0 0;
  /* Bottom: Figma's opened-card padding minus the card's own 8px. No
     top padding: it framed the divider, which is gone. */
  /* Left: the bullet sits on the title's left edge (her call), the text
     one em after it. */
  padding: 0 0 clamp(12px, calc(2.541px + 1.35135vw), 22px) 1em;
  list-style: none;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-m);
  line-height: 1.66;
}
/* The font's own bullet glyph, as Figma's list draws it; the browser's
   disc marker is visibly bigger. */
.curriculum__topics li {
  position: relative;
}
.curriculum__topics li::before {
  content: '\2022';
  position: absolute;
  left: -1em;
}

/* Two columns only while the longest title still fits on one line;
   recompute if a title, the icon size or the card padding changes. */
@media (max-width: 836.49px) {
  .curriculum__columns { flex-direction: column; align-items: stretch; }
}

/* Mobile composition (icon leads) from where the desktop one has no
   free space left between title and icon; same recompute rule. */
@media (max-width: 398.98px) {
  .curriculum__card-icon { order: -1; }
}