redbadger/website-honestly

@value badgerBlack, badgerRedOnWhite, badgerAccessibleRedOnBlack from '../../../../css/_colors.css';
@value mediumScreen, largeScreen from "../../../../css/_sizes.css";

@value badgerRedOnWhite, badgerAccessibleRedOnBlack from '../../../../css/_colors.css';
@value mediumScreen, largeScreen from "../../../../css/_sizes.css";

.listBox__item:last-child {
  border: none;
  margin-bottom: 0;
}

.listBox__item--outcomes {
  composes: lightSerif from '../../../../css/typography/_fonts.css';
}

.link {
  color: badgerBlack;
  border-bottom: 1px solid badgerRedOnWhite;
}

.link:hover {
  color: badgerRedOnWhite;
  border-bottom: 2px solid badgerAccessibleRedOnBlack;
}

.headerImgWrapper {
  background-color: badgerBlack;
}

.headerImg {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
}

.banner {
  display: block;
  height: auto;
  width: 100%;
}

.h3 {
  padding-bottom: 25px;
}

.h2 > h2 {
  font-size: 30px;
}

.tandemImage,
.bannerWrapper {
  padding-bottom: 40px;
}

.quoteWrapper {
  margin-bottom: 24px;
}

.tandemImage picture:first-child {
  display: block;
  margin-bottom: 12px;
}

.listWrapper > ul {
  padding-left: 0px;
  list-style: inside;
}
.postitGroupWrapper {
  margin-bottom: 40px;
}

.bodyImage {
  width: 100%;
  margin: auto;
  margin-bottom: 20px;
}

@media mediumScreen {
  .tabletContentWrapper {
    max-width: 620px;
    margin: 0 auto;
  }

  .coloumnContent > *:first-child {
    padding-right: 28px;
    margin-bottom: -4px;
  }

  .coloumnContent img {
    width: 100%;
  }

  .tandemImage,
  .bannerWrapper {
    padding: 0 0 70px;
  }

  .lastParagraphWrapper {
    padding-bottom: 60px;
  }

  .postitGroupWrapper {
    margin-bottom: -40px 0 40px;
  }
}

@media largeScreen {
  .videoAndResultsDesktop {
    display: flex;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
  }

  .videoAndResultsDesktop > div {
    width: 100%;
    padding-left: 0;
    margin: 0;
  }

  .videoAndResultsDesktop > div:first-of-type {
    max-width: 590px;
  }

  .videoAndResultsDesktop > div:last-of-type {
    max-width: 450px;
  }

  .coloumnContent > *:last-child {
    /* had to explicitly set the height as 100% wasn't filling the parent for some reason */
    height: 396px;
  }

  .coloumnContent {
    max-height: 396px;
  }

  .bodyImage {
    width: inherit;
    margin: inherit;
    margin-bottom: inherit;
  }

  .coloumnContentTall .coloumnContentShort,
  .coloumnContent {
    max-width: 1160px;
  }

  .coloumnContentTall {
    display: flex;
    flex-direction: row-reverse;
    margin: -50px 0;
  }

  .coloumnContentTall img {
    width: 500px;
  }

  .coloumnContent > * {
    width: 50%;
    padding: 0;
  }

  .desktopContentWrapper > div {
    max-width: 920px;
  }

  .coloumnContentShort,
  .coloumnContent {
    display: flex;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
  }

  .coloumnContentShort,
  .coloumnContent {
    width: 100%;
    padding-left: 0;
    margin: 0 0 80px;
  }

  .coloumnContentShort {
    max-height: 384px;
    justify-content: space-evenly;
  }

  .coloumnContentShort img {
    width: 100%;
  }

  .coloumnContentShort > *:first-child {
    padding-right: 40px;
  }

  .bannerWrapper {
    max-width: 1200px;
    margin: 0 auto;
  }

  .tandemImage {
    max-width: 1200px;
    display: flex;
    margin: 0 -120px;
  }

  .tandemImage picture:first-child {
    display: block;
    margin-bottom: 0;
    margin-right: 30px;
  }

  .banner {
    width: 100%;
  }

  .coloumnContentText {
    margin-top: 70px;
  }
}