/* --- reset/rescale Bootstrap (3) handiwork --- */

.featured-course .card-main,
.featured-course .instructor,
.about-featured-courses .description {
  font-size: 114.2857142857143%;
}

/* --- course type(s) --- */

.list-featured-courses .design-development {
  background-color: #d73158;
}

.list-featured-courses .development {
  background-color: #764c9f;
}

.list-featured-courses .prototyping,
.list-featured-courses .user-experience {
  background-color: #5ca5a0;
}

.list-featured-courses .career-skills,
.list-featured-courses .content-creation {
  background-color: #2c9959;
}

.featured-course .course-type {
  position: relative;
  top: -.4em;
  font: bold .85em/1.15 "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  letter-spacing: .075em;
  word-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
}

/* --- artwork mask --- */

.featured-course .mask {
  display: block;
  text-align: center;
  overflow: hidden;
}

.featured-course .mask img {
  width: auto;
  max-width: 90%;
  height: auto;
  vertical-align: middle;
  margin: -3.5% 0 -1.5%;
}

/* --- typography --- */

.list-featured-courses .featured-course header h2 {
  font: 900 1.6em/1.2 "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
}

.featured-course header h2 a,
.featured-course header h2 a:hover,
.featured-course header h2 a:focus,
.featured-course header h2 a:active {
  font: inherit;
  text-decoration: none;
}

.featured-course header p {
  font: 500 1.1em/1.4 "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  letter-spacing: .05em;
  margin: .5em 0 0;
}

.featured-course .instructor {
  padding-bottom: 1.2em;
  border-bottom: 1px dashed #444;
  margin-top: 0;
  margin-bottom: 0;
}

.featured-course .instructor dd {
  margin-left: 0;
}

.featured-course .instructor dt,
.featured-course .instructor dd {
  font: normal 1.0625em/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --- call-to-action / featured courses --- */

.about-featured-courses .cta {
  text-align: center;
  padding: 1.2em;
}

/* --- about / featured courses --- */

.about-featured-courses {
  margin: 2.2em 5% -1.8em;
}

@media (min-width: 75em) {

  .about-featured-courses {
    margin-left: 12.5%;
    margin-right: 12.5%;
  }

}

.about-featured-courses .description p {
  font: bold 1.6em/1.4 "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444 !important; /* ! */
  margin-bottom: 0;
}

/* --- typographic details --- */

/* prevent word wrap */

.no-wrap {
  white-space: nowrap;
}

/* --- card --- */

.card {
  border: 1px solid #ccc;
}

.card-main {
  padding: 1.2em;
}

.card-footer {
  background: #fff;
}

.card-info {
  padding: 1.2em 1.2em 0;
}

.card-cta {
  text-align: center;
  padding: 1.2em;
}

.card-cta a {
  display: inline-block;
  padding: 1.2em 2.2em;
  border-radius: .1875em;
}


/* --- grid cleanup --- */

/* --- legacy columns (inline-block) w/ breakpoints --- */

.cols ul {
  list-style: none;
  padding-left: 0;
  margin-top: -1.2em;
  margin-bottom: 0;
}

.cols ul li {
  margin-top: 1.2em;
  overflow: hidden;
}

@media (min-width: 40em) {

  .cols {
    padding-bottom: 1px; /* overflow height adjustment (hack) -- useful when nested content has border */
    overflow: hidden;
  }

  .cols ul {
    margin-left: -.6em;
    margin-right: -.6em;
  }

  .cols ul li {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    box-sizing: border-box;
    padding-left: .6em;
    padding-right: .6em;
    margin-right: -4px;
  }

}

@media (min-width: 62em) {

  .cols ul li {
    width: 33.333333333333333%;
  }

  .cols ul li:last-child {
    display: none;
  }

}

@media (min-width: 78em) {

  .cols ul li {
    width: 25%;
  }

  .cols ul li:last-child {
    display: inline-block;
  }

}

/* --- modern columns (grid) --- */

@supports (display: grid) {

  .cols ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19.25em, 1fr));
    grid-gap: 1.2em;
  }

  /* override -- legacy layout -- start */

  .cols {
    padding-bottom: 0;
  }

  .cols,
  .cols ul li {
    overflow: visible;
  }

  .cols ul,
  .cols ul li {
    margin-top: 0;
    margin-right: 0;
  }

  .cols ul {
    margin-left: 0;
  }

  .cols ul li {
    display: inherit;
    width: auto;
    box-sizing: content-box;
    padding-left: 0;
    padding-right: 0;
  }

@media (min-width: 62em) {

  .cols ul li:last-child {
    display: none;
  }

}

@media (min-width: 78em) {

  .cols ul li:last-child {
    display: inherit;
  }

}

  /* override -- legacy layout -- end */

  /* --- cards (grid) --- */

  .card {
    display: inherit;
  }

  .card-footer {
    align-self: end;
  }

}

/* --- gym-button --- */

.section-featured-courses .gym-button {
  display: inline-block;
  width: auto !important; /* ! */
  padding: 1em 2em !important; /* ! */
}

.section-featured-courses .gym-button b {
  color: #fff !important; /* ! */
}

/* --- overrides --- */

.list-featured-courses a:hover {
  border-bottom: 0 !important;
}

.featured-course header * {
  color: #fff !important;
}