static-cms/website/src/css/imports/hero.css

.hero {
  @neat-row;
  background: $darkerGrey;
  background-image: linear-gradient(-180deg, #2A2C24 0%, $darkerGrey 20%);
  color: $blueGrey;
  overflow: hidden;
  padding: calc($xl * 2.25) 0 0 0;
  position: relative;

  @media screen and (min-width: $mobile) {
    padding-top: calc($xl * 1.5);
  }

  @media screen and (min-width: $tablet) {
    padding-top: calc($xl * 1.5);
  }

  &.landing {
    padding-bottom: 100px;
    @media screen and (min-width: $desktop) {
      padding-bottom: 200px;
    }
  }

  .hero-copy {
    margin: $medium auto $xl auto;
  }

  .subhead {
    display: inline-block;
    margin: $micro auto;
    font-size: 18px;
    line-height: 26px;

    @media screen and (min-width: $desktop) {
      font-size: 20px;
    }
  }

  strong {
    display: block;
  }

  h1 {
    color: $green;
    margin-bottom: 0;
    max-width: 800px;
  }

  h2 {
    color: white;
  }

  h3 {
    color: white;
  }

  .hero-features {

    @media screen and (min-width: $tablet) {
      @neat-span-columns 5;
    }

    .feature {
      margin: 0 0 $medium 0;
    }

  }

  .hero-graphic {
    @media screen and (min-width: $tablet) {
      @neat-span-columns 6;
      float: right;
      margin: 0;
    }

    img, iframe {
      width: 100%;
      border-radius: $largeBorderRadius;
      box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);
    }

    a.hero-videolink {
      display: block;
      text-align: center;
      margin-top: $micro;
      padding: $micro 0 $micro 0;
      font-size: 14px;
      font-weight: $semibold;
      color: white;
      background-color: rgba(255,255,255,0.1);
      border-radius: $borderRadius;
    }
    a.hero-videolink:hover {
      background-color: rgba(255,255,255,0.2);
    }
    a.hero-videolink:active {
      background-color: rgba(255,255,255,0.4);
    }
  }

 /*COMMUNITY PAGE*/

 &.community {
   .hero-copy {
     text-align: left;
     @media screen and (min-width: $tablet) {
       @neat-span-columns 5;
     }
   }
 }

 .ctas {
  margin-bottom: $small;

  @media screen and (min-width: $mobile) {
    text-align: left;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  a {
    color: $green;
    font-weight: $semibold;
  }
}

.calendar-cta {
  text-align: center;
  background: $darkerGrey;
  background-image: linear-gradient(-17deg, $darkerGrey 17%, $darkGrey 94%);
  border-radius: $largeBorderRadius;
  box-shadow: 0 $micro $small rgba(0,0,0,0.1);
  padding: $medium;
  box-sizing: border-box;

  @media screen and (min-width: $tablet) {
    max-width: 446px;
  }

  @media screen and (min-width: $tablet) {
    @neat-span-columns 5;
    @neat-shift 1;
    display: inline-block;
    position: fixed;
    right: $medium;
    max-height: calc(100vh - ($xl * 1.5) - $medium);
    overflow-y: auto;
  }

  @media screen and (min-width: 1280px) {
    right: initial;
    left: calc(50% - $large);
  }

  .calendar {
    border-radius: $largeBorderRadius;
    overflow: hidden;
    box-shadow: 0 $micro $small rgba(0,0,0,0.5);
    margin: $small auto;
    max-width: 250px;

    .month {
      background: $green;
      color: $grey;
      font-weight: $black;
      text-transform: uppercase;
      letter-spacing: 4px;
      font-size: $tiny;
      padding: $tiny;
    }

    .day {
      font-size: $xl;
      font-weight: $black;
      color: white;
      border: 1px solid $grey;
      border-top: none;
      border-bottom-left-radius: $largeBorderRadius;
      border-bottom-right-radius: $largeBorderRadius;
    }
  }

  strong {
    display: inline-block;
  }

  h2:not(:first-child) {
    font-weight: $light;
  }

  .cal-cta {
    margin-top: $micro;

    a {
      color: $green;
    }
  }
}


}