redbadger/website-honestly

@value badgerRed, badgerBlack, badgerWhite, cainYellow, daveGreen, stuBlue from "../../css/_colors.css";
@value largeScreen, mediumScreen from "../../css/_sizes.css";
@value serif, fontM2, sansSerif, fontS from "../../css/typography/_fonts.css";

.subHeading {
  composes: serif;
  composes: fontM2;
  color: badgerBlack;
  display: inline-block;
  margin: 20px 0 8px;
  padding: 1px 15px;
}

.blueSubHeading {
  composes: subHeading;
  background-color: stuBlue;
}

.greenSubHeading {
  composes: subHeading;
  background-color: daveGreen;
}

.yellowSubHeading {
  composes: subHeading;
  background-color: cainYellow;
}

.redSubHeading {
  composes: subHeading;
  background-color:badgerRed;
  color: badgerWhite;
}

.description,
.descriptionLink {
  composes: sansSerif;
  composes: fontS;
  color: #F8F8F8;
}

.descriptionLink:hover {
  border-bottom: 2px solid badgerRed;
}

@media mediumScreen {
  .description,
  .descriptionLink {
    font-size: 20px;
    line-height: 1.5em;
  }

  .subHeading {
    margin-top: 0;
    font-size: 24px; /* deviation from size */
  }
}

@media largeScreen {
  .subHeading {
    display: block;
    padding: 1px 0;
    text-align: center;

  }
}