redbadger/website-honestly

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

.arrow {
  width: 15px;
  height: 15px;
  margin: 0 10px;
}

.homepageTopSlice {
  padding: 50px 20px 100px 20px;
  text-align: center;
  background-color: badgerWhite;
  color: badgerBlack;
}

.sloganWrapper {
  position: relative;
  margin-bottom: 20px;
  display: block;
  color: #212121;
}

.badgerSlogan {
  composes: fontXL from '../../../css/typography/_fonts.css';
  composes: serif from '../../../css/typography/_fonts.css';
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid badgerWhite;
}

.lastWord {
  white-space: nowrap;
}

.sloganLink {
  color: badgerBlack;
  border-bottom: 0;
}

.sloganLink:hover {
  border-bottom: 0;
}

.sloganLink:hover .sloganUnderline {
  border-bottom: 2px solid badgerRed;
}

.sloganDescription {
  composes: fontM from '../../../css/typography/_fonts.css';
  composes: serif from '../../../css/typography/_fonts.css';
}

@media mediumScreen {
  .homepageTopSlice {
    text-align: left;
    padding: 50px 100px 100px 120px;
  }

  .sloganWrapper {
    margin-bottom: 30px;
  }
}

@media largeScreen {
  .arrow {
    width: 20px;
    height: 20px;
  }

  .homepageTopSlice {
    text-align: center;
    padding: 160px 0 230px 0;
  }

  .sliceContainer {
    max-width: 830px;
    display: inline-block;
    text-align: left;
  }
}