redbadger/website-honestly

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

.quotation {
  composes: lightSerif from "../../css/typography/_fonts.css";
  width: 100%;
  color: badgerRedOnWhite;
  text-align: left;
  padding: 0 22px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  background: #FFFFFF;
}

.quotation__quote {
  max-width: 690px;
  margin: auto;
}

.quotation__quote:before {
  content: "“";
  vertical-align: top;
  padding-right: 10px;
  margin-left: 0px;
  margin-bottom: 20px;
}

.quotation__quote:before, .quotation__quote:after {
  speak: none;
  font-size: 48px;
  color: #000;
  position: relative;
  top: 10px;
}

.quotation__quote:after {
  content: "”";
  vertical-align: top;
  padding-left: 10px;
}

.quotation__author {
  composes: fontXS from "../../css/typography/_fonts.css";

  margin-top: 22px;
  margin: auto;
  width: 100%;
  color: #000;
  padding-top: 15px;
}

.quotation__author__name {
  composes: boldSansSerif from "../../css/typography/_fonts.css";
}

.quotation__author__title {
  composes: sansSerif from "../../css/typography/_fonts.css";
}

.quotation__text {
  composes: fontS2 from "../../css/typography/_fonts.css";
  font-size: 24px;
  display: inline;
  max-width: 690px;
}

@media mediumScreen {
  .quotation {
    text-align: center;
    background: transparent;
    border-top: 2px solid #cccccc;
    border-bottom: 2px solid #cccccc;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .quotation__wrapper {
    max-width: 1440px;
    padding: 0px 20px 0px;
    margin: auto;
  }

  .quotation__innerWrapper {
    padding-left: 114px;
    padding-right: 0px;
  }

  .quotation__text {
    font-size: 30px;
  }
}

@media largeScreen {
  .quotation {
    margin-bottom: 60px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .quotation__wrapper {
    padding: 0px 120px 0px;
  }

  .quotation__innerWrapper {
    padding-left: 30%;
    padding-right: 10%;
  }
}