redbadger/website-honestly

@value badgerRedOnWhite, badgerBlack, badgerWhite from "../../css/_colors.css";
@value largeScreen from "../../css/_sizes.css";
@value red from "../../components/variables/colors.css";

.background {
  background-color: badgerWhite;
}

.mainContainer {
  max-width: 920px;
  margin: auto;
}

.twoColumn {
  display: flex;
}

.event {
  max-width: 470px;
  margin-right: 20px;
}

.eventImg {
  margin-top: 14px;
  border: 4px solid lightgrey;
  display: none;
  max-width: 400px;
}

@media largeScreen {
  .eventImg {
    display: block;
  }
}

.eventBody a {
  color: badgerBlack;
  border-bottom: 1px solid badgerRedOnWhite;
  transition: all 0.2s ease;
}

.eventBody a:hover {
  color: badgerRedOnWhite;
}

.h1 {
  composes: serif from "../../css/typography/_fonts.css";
  composes: fontL from "../../css/typography/_fonts.css";
  text-align: center;
}

.eventsList {
  font-size: 1em;
}

.eventItem {
  position: relative;
  list-style-type: none;
}

.eventTitleLink {
  text-decoration: none;
}

.eventTitle {
  composes: serif from "../../css/typography/_fonts.css";
  composes: fontM2 from "../../css/typography/_fonts.css";
  text-decoration: none;
  display: inline;
  margin: 0 0 20px 0;
  color: badgerBlack;
}

.paragraph {
  color: badgerBlack;
  composes: fontXS from "../../css/typography/_fonts.css";
  composes: sansSerif from "../../css/typography/_fonts.css";
  margin: 10px 0px;
}

.arrow {
  font-size: 1.2em;
  color: black;
}

.fullDetailsLink {
  display: block;
  text-decoration: none;
  margin-top: 0.8em;
  position: relative;
}

.eventDescription {
  composes: fontXS from "../../css/typography/_fonts.css";
  composes: serif from "../../css/typography/_fonts.css";
  margin-top: 10px;
  font-weight: bold;
}

.eventLinks {
  composes: cf from "../../components/utils/layout.css";
}

.externalLinkIcon {
  font-size: 1em;
  color: red;
  position: absolute;
}

.eventTags {
  margin-top: 1.5em;
}

.mobileHorizontalLine {
  display: none;
  margin: 1.5em 0 0 0;
}

.moreEvents {
  composes: bodyLink from "../../css/_links.css";
  display: block;
  margin-bottom: 25px;
  composes: sansSerif from "../../css/typography/_fonts.css";
}

.moreEvents a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
  border-bottom: 1px solid red;
}

.moreEvents a:hover, .moreEvents a:focus {
  color: red;
}