.related-classes{padding:clamp(64px,8vw,112px) 0;background:#fbf5f6;color:#11175f}
.related-classes-head{max-width:760px;margin-bottom:34px}.related-classes-head h2{margin:8px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,4.6vw,68px);line-height:.98;font-weight:400}
.related-classes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.related-class-card{overflow:hidden;border:1px solid rgba(17,23,95,.12);border-radius:26px;background:#fff;box-shadow:0 16px 42px rgba(17,23,95,.08)}
.related-class-card>a{display:flex;height:100%;flex-direction:column;color:inherit;text-decoration:none}.related-class-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eee8f0}.related-class-card:nth-child(1) img{object-position:50% 38%}.related-class-card:nth-child(2) img{object-position:50% 35%}.related-class-card:nth-child(3) img{object-position:50% 42%}
.related-class-card div{display:flex;min-height:190px;flex:1;flex-direction:column;padding:24px}.related-class-card p{margin:0 0 10px;color:#7b2cbf;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.related-class-card h3{margin:0;font-size:clamp(25px,2.2vw,34px);line-height:1.05}.related-class-card span{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:18px;font-weight:800}.related-class-card a:focus-visible{outline:3px solid #7b2cbf;outline-offset:-3px}
@media(max-width:900px){.related-classes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-class-card:last-child{grid-column:1/-1;max-width:calc(50% - 11px)}}
@media(max-width:700px){.related-classes{padding:56px 0}.related-classes-grid{grid-template-columns:1fr;gap:16px}.related-class-card:last-child{grid-column:auto;max-width:none}.related-class-card{border-radius:20px}.related-class-card>a{display:grid;grid-template-columns:116px 1fr}.related-class-card img{height:100%;min-height:150px;aspect-ratio:auto}.related-class-card div{min-height:150px;padding:18px}.related-class-card h3{font-size:25px}}

/* Keep intrinsic HTML image dimensions from turning recommendations into posters. */
.related-classes { padding: 64px 0; }
.related-classes-head h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; }
.related-class-card img { height: auto; min-height: 0; aspect-ratio: 4 / 3; flex: none; }
.related-class-card div { min-height: 146px; padding: 20px; }
.related-class-card h3 { font-size: 28px; }
@media (max-width: 900px) and (min-width: 701px) {
  .related-classes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .related-class-card:last-child { grid-column: auto; max-width: none; }
  .related-class-card div { padding: 16px; }
  .related-class-card h3 { font-size: 23px; }
}
@media (max-width: 700px) {
  .related-classes { padding: 44px 0; }
  .related-classes-head { margin-bottom: 24px; }
  .related-class-card > a { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .related-class-card img { height: auto; min-height: 0; aspect-ratio: 4 / 3; object-fit: contain; }
  .related-class-card div { min-height: 136px; padding: 16px; }
  .related-class-card h3 { font-size: 23px; }
  .related-class-card p { font-size: 10px; }
  .related-class-card span { font-size: 13px; padding-top: 10px; }
}