redbadger/website-honestly

@value badgerWhite, badgerRedOnWhite, badgerRedOnBlack, badgerBlack from "../../css/_colors.css";
@value mediumScreen, largeScreen, contentMaxWidth, containerMaxWidth from "../../css/_sizes.css";

.headerContainer {
  display: flex;
  composes: dividerBlack from '../../css/_divider.css';
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px 20px;
  background-color: badgerBlack;
}

.mainHeader {
  composes: fontL from '../../css/typography/_fonts.css';
  composes: serif from '../../css/typography/_fonts.css';
  text-align: center;
  color: badgerWhite;
}

.subHeader {
  composes: fontS from '../../css/typography/_fonts.css';
  composes: serif from '../../css/typography/_fonts.css';
  font-size: 16px;
  color: badgerWhite;
}

.caseStudyContainer {
  padding: 30px 20px 30px 20px;
  background-color: badgerBlack;
}

.caseStudyContainer img {
  width: 100%;
  margin-bottom: 30px;
}

.caseStudyCompany {
  color: badgerRedOnWhite;
  composes: fontXS from '../../css/typography/_fonts.css';
  composes: boldSansSerif from '../../css/typography/_fonts.css';
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 5px;
  width: 100%;
}

.caseStudyCompany--onBlack {
  color: badgerRedOnBlack;
}

.imageWrapper {
  font-size: 0;
}

.caseStudyTitle {
  color: badgerWhite;
  composes: fontM from '../../css/typography/_fonts.css';
  composes: serif from '../../css/typography/_fonts.css';
  display: inline;
}

.caseStudyTitleContainer {
  margin-bottom: 15px;
}

.caseStudyTitle:hover {
  border-bottom: 2px solid badgerRedOnWhite;
}

.caseStudyDescription {
  color: badgerWhite;
  composes: fontXS from '../../css/typography/_fonts.css';
  composes: sansSerif from '../../css/typography/_fonts.css';
}

.inverse {
  background-color: badgerWhite;
}

.inverse .caseStudyTitle,
.inverse .caseStudyDescription {
  color: badgerBlack;
}

.buttonContainer {
  display: flex;
  justify-content: center;
  padding: 20px 0px 60px 0px;
  background-color: badgerBlack;
}

.button {
  composes: primaryButton from '../../css/_links.css';
}

@media mediumScreen {
  .caseStudyContainer {
    display: flex;
    padding: 60px;
    justify-content: center;
  }
  .caseStudyContent {
    display: flex;
    max-width: containerMaxWidth;
    width: 100%;
  }
  .inverse .caseStudyContent {
    flex-direction: row-reverse;
  }

  .caseStudyTextContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0px 10%;
    flex: 1;
  }

  .caseStudyContainer img {
    margin-bottom: 0px;
  }

  .subHeader {
    font-size: 24px;
  }

  .imageWrapper {
    display: flex;
    flex: 1;
    align-items: flex-end;
  }

  .buttonContainer {
    padding: 20px 0px 70px 0px;
  }
}
@media largeScreen {
  .mainHeader {
    margin-bottom: 30px;
  }

  .caseStudyTitleContainer {
    margin-bottom: 30px;
  }

  .headerContainer {
    padding-top: 60px;
    padding-bottom: 30px;
  }
}