redbadger/website-honestly

@value badgerBlack, badgerWhite, scorpian, badgerRed, midBlue, brightBlue from '../../css/_colors.css';
@value mediumScreen, largeScreen from "../../css/_sizes.css";

.WasmWhitepaperSliceWrapper {
  composes: dividerMidBlue from '../../css/_divider.css';
  width: 100%;
  background-color: brightBlue;
  background-image: url(./images/background.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: badgerBlack;
}

.WasmWhitepaperSliceBodyheader {
  composes: boldSansSerif from '../../css/typography/_fonts.css';
  display: flex;
  margin-bottom: 20px;
}

.WasmWhitepaperSliceBodyheader h3 {
  font-size: 32px;
  line-height: 46px;
  margin-right: 14px;
}

.WasmWhitepaperSlice {
  composes: sansSerif from '../../css/typography/_fonts.css';
  position: relative;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 60px;
  line-height: 1.5em;
}

.WasmWhitepaperSlice p {
  font-size: 18px;
  line-height: 1.25em;
  margin-bottom: 20px;
}

.WasmWhitepaperSliceBodySubHeader {
  margin-bottom: 32px;
}

.WasmWhitepaperSliceTitleImage {
  display: block;
  width: 100%;
  max-width: 250px;
  margin-bottom: 16px;
}

.WasmWhitepaperSliceLink {
  composes: boldSansSerif from '../../css/typography/_fonts.css';
  cursor: pointer;
  font-size: 18px;
  background: badgerBlack;
  color: badgerWhite;
  display: inline-block;
  text-align: center;
  padding: 16px;
}

.WasmWhitepaperSliceLink:hover {
  background: scorpian;
}

.WasmWhitepaperSliceImageWrapper {
  display: none;
  max-width: 472px;
}

.WasmWhitepaperSliceBodyLink {
  composes: bodyUnderlineLink from '../../css/_links.css';
}

@media mediumScreen {
  .WasmWhitepaperSlice {
    display: flex;
    flex-direction: row;
    padding: 40px 60px;
  }

  .WasmWhitepaperSlice p {
    font-size: 22px;
    margin-bottom: 40px;
  }

  .WasmWhitepaperSliceLink {
    font-size: 24px;
  }

  .WasmWhitepaperSliceText {
    width: 100%;
    min-width: 420px;
  }
}

@media largeScreen {
  .WasmWhitepaperSliceTitleImage {
    margin-top: 14px;
    margin-bottom: 32px;
    display: block;
    width: 320px;
  }

  .WasmWhitepaperSliceImageWrapper {
    display: flex;
    flex-grow: 1;
    max-width: 100%;
    justify-content: center;
  }

  .WasmWhitepaperSliceText {
    width: 52%;
  }
}