redbadger/website-honestly

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

.arrow {
  width: 22px;
  display: inline-block;
}

.arrow svg {
  width: 15px;
  margin: 0 10px;
}

.screenReaderText {
  composes: visuallyHidden from '../../css/_accessibility.css';
}

.heading {
  composes: fontM from '../../css/typography/_fonts.css';
  composes: serif from '../../css/typography/_fonts.css';
  max-width: 690px;
  margin: 0px auto;
  color: badgerWhite;
  text-align: center;
  padding: 30px 0;
}

.caseStudyContainer {
  composes: dividerBlack from '../../css/_divider.css';
  background-color: badgerBlack;
  padding: 0px 5% 12px 5%;
}

.limitWidth {
  max-width: containerMaxWidth;
  margin: auto;
}

.figuresContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.figureLink {
  border-top: 1px solid linesOnBlack;
  padding: 30px 0;
  min-height: 290px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 0 1 auto; /*Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7*/
}

/* Rearrange stats comoponents */
.figureLink:nth-child(1) {
  order: 0;
}
.figureLink:nth-child(2) {
  order: 1;
}
.figureLink:nth-child(3) {
  order: 3;
}
.figureLink:nth-child(4) {
  order: 2;
}

.statsContainer {
  display: block;
  margin: auto 0;
}

.logoContainer {
  display: flex;
  height: 50px;
}

.logo {
  height: 50px;
}

.caseText {
  composes: fontM from '../../css/typography/_fonts.css';
  composes: serif from '../../css/typography/_fonts.css';
  color: badgerWhite;
  text-align: center;
  padding: 0 30px 20px;
  max-width: 400px;
  display: block; /*Set to avoid IE10 bug with non-wrapping text*/
  flex: 0 1 auto; /*Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7*/
}

.countdownText {
  composes: caseText;
  padding: 0;
  font-size: 99px;
}

.countdownCaseText {
  composes: caseText;
  margin-bottom: 10px;
  padding: 0;
  max-width: 390px;
}

.lastWord {
  display: inline;
  white-space: nowrap;
  position: relative;
}

.centerText {
  composes: fontXL from '../../css/typography/_fonts.css';
  composes: serif from '../../css/typography/_fonts.css';
  color: badgerWhite;
  text-align: center;
  max-width: 350px;
  display: block; /*Set to avoid IE10 bug with non-wrapping text*/
  flex: 0 1 auto; /*Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7*/
  margin: auto;
}

.companyText {
  composes: boldSansSerif from '../../css/typography/_fonts.css';
  color: badgerWhite;
  font-size: 18px;
  margin: 30px 0 10px 0;
}

.buttonContainer {
  display: flex;
  justify-content: center;
  padding: 30px 0px 40px 0px;
}

.button {
  composes: primaryButton from '../../css/_links.css';
  background-color: badgerRed;
}

@media mediumScreen {
  .caseStudyContainer {
    padding: 0;
  }

  .heading {
    font-size: 40px;
    padding: 40px;
  }

  .figuresContainer {
    min-width: 690px;
    max-width: 1000px;
    margin: 0 auto;
  }

  .centerText {
    font-size: 40px;
    margin: 20px;
  }

  .companyText {
    margin: 21px 0 10px;
  }

  .countdownText {
    font-size: 113px;
    padding: 0 15px;
    margin-top: -40px;
  }

  .countdownCaseText {
    margin-bottom: 0;
    max-width: 320px;
  }

  .figureLink {
    min-height: 410px;
    width: 50%;
    padding: 60px 10px;
  }

  .figureLink:nth-child(odd) {
    border-right: 1px solid linesOnBlack;
  }

  /* Rearrange stats comoponents */
  .figureLink:nth-child(1) {
    order: 0;
  }
  .figureLink:nth-child(2) {
    order: 1;
  }
  .figureLink:nth-child(3) {
    order: 2;
  }
  .figureLink:nth-child(4) {
    order: 3;
  }
}

@media largeScreen {
  .heading {
    padding: 50px 60px 60px 60px;
  }

  .figuresContainer {
    max-width: 1160px;
  }

  .figuresContainer img {
    height: 80px;
  }

  .countdownText {
    font-size: 150px;
  }

  .countdownCaseText {
    font-size: 35px;
    max-width: 440px;
  }

  .centerText {
    font-size: 60px;
    max-width: 480px;
  }

  .logoContainer {
    height: 80px;
  }

  .figureLink {
    padding: 30px 10px;
    max-height: 535px;
  }

  .companyText {
    font-size: 28px;
    margin-top: 34px;
  }

  .caseCompanies {
    margin: 0 auto;
    max-width: 1160px;
  }

  .caseCompaniesLogo {
    width: auto;
    margin: 10px auto;
  }

  .caseCompaniesLogo img {
    max-height: 80px;
  }

  .buttonContainer {
    padding: 60px 0px;
  }
}