// Course Categories // ====================================== .course-categories { .section__headings { margin: 0 0 $gutter-width * 2; } .section__heading, .section__subheading { color: $heading__color; } } .course-categories__container { @include make-container; } .course-category__list { @include make-row(true); @include justify-content(center); } .course-category__list-item { @include screen-md-min { @include make-col(6); max-width: 384px; } @include screen-lg-min { @include make-col(6); max-width: 400px; } max-width: 352px; padding-bottom: $gutter-width; } .course-category-card { @include card; border: 0; border-radius: $base__border-radius; &:hover { cursor: pointer; } } .course-category-card__img-container { position: relative; text-align: center; h3 { margin: $gutter-width 0; color: dynamic-contrast-color($interface__background-color); font-family: $heading__font-family; font-size: 1.25rem; font-weight: $heading__font-weight; line-height: 1.25; text-align: center; } } .course-category-card__img { @include screen-sm-min { height: 198px; } @include screen-lg-min { height: 207px; } display: inline-block; width: 100%; height: 162px; margin-bottom: -5px; border-radius: 5px 5px 0 0; } .course-category-card__course-count { display: block; padding: 0; font-size: .875rem; font-weight: 400; line-height: 1; text-align: center; strong { display: block; } }