redbadger/website-honestly

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

.category {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid badgerBlack;
}

.category__title {
  composes: fontXS from "../../../../css/typography/_fonts.css";
  composes: boldSansSerif from "../../../../css/typography/_fonts.css";
  color: badgerRedOnWhite;
  text-transform: uppercase;
  width: 100%;
  padding: 20px 10px 0 0;
}

.category__questionList {
  width: 100%;
}

.category__element {
  border-top: 2px solid linesOnWhite;
}

.category__element:first-child {
  border-top: 0;
}

@media mediumScreen {
  .category__title {
    width: calc((100% + 20px) / 6);
    padding-right: 20px;
  }

  .category__questionList {
    width: calc((100% + 20px) * 5 / 6 - 20px);
  }
}

@media largeScreen {
  .category__title {
    width: calc((100% + 20px) / 5);
  }

  .category__questionList {
    width: calc((100% + 20px) * 4 / 5 - 20px);
  }
}