redbadger/website-honestly

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

.triangleSlice {
  composes: dividerBlack from "../../../css/_divider.css";
  color: badgerWhite;
  background-color: badgerBlack;
  padding: 35px 25px 50px 25px;
  text-align: center;
}

.triangleHeader {
  composes: fontL from "../../../css/typography/_fonts.css";
  composes: serif from "../../../css/typography/_fonts.css";
  max-width: 300px;
  margin: 0 auto;
}

.triangleThingHeader {
  composes: fontStaticM from "../../../css/typography/_fonts.css";
  composes: serif from "../../../css/typography/_fonts.css";
  text-align: left;
}

.rightThingsList {
  composes: fontStaticM from "../../../css/typography/_fonts.css";
  composes: serif from "../../../css/typography/_fonts.css";
  margin-top: 30px;
  max-width: 300px;
  counter-reset: listCounter 4;
  display: inline-block;
}

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

.rightThingsList li:before {
  content: counter(listCounter);
  counter-increment: listCounter -1;
  float: left;
}

.rightThingsList li {
  margin-bottom: 30px;
}

.mobileTriangleImage {
  width: 50%;
}

.rightThingText {
  margin: 0 0 40px 40px;
}

.rightThingText p {
  text-align: left;
}

.fullTriangleImage {
  display: none;
  width: 309px;
  height: 447px;
  padding-right: 50px;
}

.triangleContainer {
  display: flex;
  max-width: 300px;
  margin: 0 auto;
}

.triangleTop {
  width: 100px;
  max-width: 100%;
}

.triangleMiddle {
  width: 220px;
  max-width: 100%;
}

.triangleBottom {
  width: 300px;
  max-width: 100%;
}

@media mediumScreen {
  .triangleContainer, .rightThingsList, .triangleHeader {
    max-width: 500px;
  }
}

@media largeScreen {
  .triangleContainer {
    margin: 45px auto 0 auto;
    max-width: 800px;
  }

  .mobileTriangleImage {
    display: none;
  }

  .fullTriangleImage {
    display: block;
  }

  .triangleHeader {
    max-width: none;
  }

  .rightThingsList {
    max-width: 500px;
  }
}