redbadger/website-honestly

@value badgerWhite, badgerRedOnWhite, badgerBlack, daveGreen, cainYellow, scorpian from "../../css/_colors.css";
@value mediumScreen, largeScreen, contentMaxWidth from "../../css/_sizes.css";

/* ============= Intro Stying ============= */
.heading {
  margin: 40px auto;
  max-width: 395px;
  text-align: center;
}

.green {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.left {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.image {
  position: relative;
}

.image img {
  height: 250px;
  width: 300px;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.roundTableHeading {
  composes: boldSansSerif from "../../css/typography/_fonts.css";
  font-size: 24px;
  position: absolute;
  width: 64px;
  text-align: center;
  top: 86px;
  left: 117px;
}

.roundTableSubHeading {
  margin-bottom: 4px;
}

.description {
  display: inline-block;
  margin: 0 auto 30px;
  max-width: 350px;
}

.roundTableDescription {
  font-size: 20px;
}

@media mediumScreen {
  .green {
    flex-direction: row;
  }

  .heading {
    margin-top: 70px;
    margin-bottom: 110px;
    max-width: 630px;
    text-align: left;
    padding-left: 40px;
  }

  .left {
    width: 100%;
    margin-bottom: 0;
  }

  .right {
    padding-left: 12px;
    text-align: left;
    width: 100%;
  }

  .description {
    margin-left: 0;
    margin-right: 0;
  }
}

@media largeScreen {
  .image img {
    height: auto;
    width: 350px;
  }

  .heading {
    margin-top: 150px;
    margin-bottom: 150px;
    max-width: 1000px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .roundTableHeading {
    left: 139px;
    top: 106px;
  }

  .roundTableSubHeading {
    margin-bottom: 12px;
  }
}

/* ============= Webinar signup styling ============= */

.webinar {
  background-color: daveGreen;
  color: badgerBlack;
  composes: serif from "../../css/typography/_fonts.css";
  font-weight: 900;
  composes: dividerGreen from "../../css/_divider.css";
  padding-bottom: 8px;
}

.webinarInner {
  padding: 30px 20px 35px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.webinarText {
  font-size: 30px;
}

.webinarButton {
  min-width: 200px;
  padding: 0 20px;
  margin-top: 30px;
  height: 55px;
  background-color: badgerBlack;
  color: badgerWhite;
  composes: boldSansSerif from "../../css/typography/_fonts.css";
  composes: fontS2 from "../../css/typography/_fonts.css";
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.webinarButton:hover {
  background-color: scorpian;
}

@media mediumScreen {
  .webinarInner {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    max-width: none;
    padding: 40px 20px;
  }

  .webinarText {
    padding: 0;
    margin-right: 20px;
  }

  .webinarButton {
    margin: 0 10px;
  }
}

@media largeScreen {
  .webinarInner {
    max-width: contentMaxWidth;
    padding: 50px 0px;
  }
}

/* ============= Past and Future Stying ============= */

.pastAndFuture {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: badgerBlack;
}

.leftBlogs {
  composes: dividerWhiteSmall from "../../css/_divider.css";
  background-color: badgerWhite;
  color: badgerBlack;
}

.rightBlogs {
  composes: dividerBlack from "../../css/_divider.css";
  background-color: badgerBlack;
  color: badgerWhite;
}

@media largeScreen {
  .pastAndFuture {
    flex-direction: row;
    composes: dividerBlackLarge from "../../css/_divider.css";
  }

  .leftBlogs {
    flex: 1 50%;
  }

  .rightBlogs {
    flex: 1 50%;
  }
}

/* ============= Social slice styling ============= */

.social {
  background-color: cainYellow;
  color: badgerBlack;
  composes: serif from "../../css/typography/_fonts.css";
  font-weight: 900;
  composes: dividerYellow from "../../css/_divider.css";
  padding-bottom: 8px;
}

.socialIcon {
  margin: -2px 15px 0 0;
  height: 28px;
}

.socialIcon svg {
  width: 28px;
  height: 28px;
}

.socialIcon svg g {
  fill: badgerWhite;
}