redbadger/website-honestly

@value badgerWhite, badgerBlack from "../../../../css/_colors.css";
@value smallScreen, mediumScreen, largeScreen, maxWidth from "../../../../css/_sizes.css";

.image {
  display: none;
}

.imageWrapper {
  display: none;
  padding-top: 10px;
}

.year {
  composes: fontS from '../../../../css/typography/_fonts.css';
  composes: boldSansSerif from '../../../../css/typography/_fonts.css';
  color: badgerRed;
  font-size: 16px;
}

.title {
  composes: serif from '../../../../css/typography/_fonts.css';
  composes: fontM2 from '../../../../css/typography/_fonts.css';
  margin-bottom: 10px;
  color: badgerBlack;
}

.body {
  composes: sansSerif from '../../../../css/typography/_fonts.css';
  composes: fontXS from '../../../../css/typography/_fonts.css';
  color: badgerBlack;
}

.body p {
  margin-bottom: 10px;
}

.fact {
  composes: sansSerif from '../../../../css/typography/_fonts.css';
  composes: fontXS from '../../../../css/typography/_fonts.css';
  color: badgerBlack;
}

.factTitle {
  composes: boldSansSerif from '../../../../css/typography/_fonts.css';
}

.largeScreen {
  display: none;
  overflow-y: auto;
}

.smallScreen {
  display: block;
  padding-bottom: 30px;
}

.topRow {
  display: block;
}

.copy {
  margin: 0px 0px 0px 0px;
  padding: 25px 20px 0px 20px;
}

.counterRow {
  border-bottom: 1px solid #ccc;
  margin: 30px 20px 0px 20px;
}

@media largeScreen {
  .image {
    display: block;
    width: 100%;
  }

  .imageWrapper {
    display: block;
    max-width: 38%;
  }

  .largeScreen {
    display: block;
    max-width: 1200px;
    margin: auto;
    padding-bottom: 60px;
  }

  .smallScreen {
    display: none;
  }

  .year {
    line-height: 1.3em;
  }

  .copy {
    align-self: flex-start;
    max-width: 61%;
    padding: 10px 30px 0px 30px;
  }

  .topRow {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .topRowFlipped {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
  }

  .counterRow {
    display: flex;
    justify-content: center;
    border-bottom: none;
    height: 85px;
    margin-top: 60px;
  }
}