redbadger/website-honestly

@value mediumScreen, largeScreen from '../../../../css/_sizes.css';

.header {
  width: 100%;
  background-color: #ffd811;
}

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

.tickImage,
.smileyImage,
.pyramidImage {
  display: block;
  max-width: 100%;
}

.listBox {
  margin: 10px 0;
}

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

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

@media mediumScreen {
  .content__float {
    float: right;
    max-width: 45%;
    margin: 5px 0 20px 40px;
  }

  .content__float--left {
    float: left;
    margin: 5px 40px 20px 10%;
  }

  .content__float--noBottomMargin {
    margin-bottom: 0;
  }

  .listBox {
    margin: 20px 30px 10px;
  }

  /*
  The images need to occupy additional vertical space,
  so the text won't flow around.
   */
  .smileyImage {
    margin-top: 55px;
    margin-bottom: 55px;
  }

  .pyramidImage {
    margin-top: 65px;
    margin-bottom: 75px;
  }
}

@media largeScreen {
  .content__float--left {
    margin-left: 20%;
  }

  .tickImage {
    width: 434px;
  }

  .smileyImage,
  .pyramidImage {
    width: 453px;
  }
}