/* Lecture fee cards (Mouth Breathing, Twin Block) */
.fees { padding: 43px 10px 69px; }
.fees h2 { margin-bottom: 80px; color: #fff3f3; font-size: 60px; line-height: 70px; letter-spacing: -3px; text-align: center; }
.fees__grid { display: grid; grid-template-columns: repeat(var(--fee-columns, 3), var(--fee-width, 407px)); justify-content: center; align-items: start; gap: 40px; }
.fee-card { padding: 72px 45px 60px; border: 1px solid #1f1f1f; border-radius: 25px; background: #ac8de0; color: #f5f5f5; }
.fee-card h3 { margin-bottom: 14px; font-size: 34px; line-height: 34px; letter-spacing: -.03em; }
.fee-card__topic { position: relative; padding-left: 20px; font-size: 20px; font-weight: 700; line-height: 30px; }
.fee-card__topic::before { content: ""; position: absolute; top: 17px; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.fee-card__price { margin: 35px 0 20px; color: #fff; font: 600 43px/54px var(--font-heading); letter-spacing: -.03em; }
.fee-card__price span { font-size: 42px; }
.fee-card__button { display: inline-flex; align-items: center; gap: 15px; padding: 10px 22px 11px; border: 1px solid #333; border-radius: 15px; background: #333; color: #fff; font-size: 14px; line-height: 27px; transition: background-color .25s, border-color .25s; }
.fee-card__button:hover { background: var(--teal); border-color: var(--teal); }
.fee-card__button .icon { width: 10px; height: 10px; }

/* On phones the original site hides the lecture price cards. */
@media (max-width: 767px) {
  .fees__grid { display: none; }
}

/* Tablets: let the cards share the available width. */
@media (min-width: 768px) and (max-width: 1340px) {
  .fees__grid { grid-template-columns: repeat(auto-fit, minmax(0, var(--fee-width, 407px))); gap: 24px; padding-inline: 10px; }
  .fees__grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, var(--fee-width, 407px))); }
  .fee-card { padding: 56px 28px 44px; }
}