static/scss/landing.scss
@import "globals";

#page-landing #content {

  .hero {
    overflow: hidden;
    position: relative;

    &--fixed {
      height: 400px;
    }

    &--white {
      background: white;
    }

    &__entrant-bg {
      position: absolute;
      left: 0;
      // Leave enough room for images to go off the edge of the screen
      right: -100px;
      height: 400px;

      img {
        display: block;
        float: left;
        width: 100px;
        height: 100px;
      }

      &:after {
        display: block;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(55, 61, 73, .85);
      }
    }

    &__content {
      // For z-index priority
      position: relative;
      box-sizing: border-box;
      width: 1020px;
      height: 100%;
      margin: 0 auto;
      padding: 0 50px;
      display: flex;
      flex-direction: row;

      @media screen and (max-width: $MOBILE-WIDTH) {
        width: 100%;
        padding: 0 20px;
        flex-wrap: wrap;
      }
    }

    &__top-four {
      flex-shrink: 0;
      width: 375px;
      height: 325px;
      margin: auto 0;
      overflow: hidden;

      img {
        display: block;
        float: left;
        margin: 0 25px 25px 0;
        box-shadow: 0 0 7px 2px rgba(#000, .7);
      }

      @media screen and (max-width: $MOBILE-WIDTH) {
        display: none;
      }

    }

    &__tools {
      flex-shrink: 0;
      width: 375px;
      height: 325px;
      margin: auto 0;
      overflow: hidden;
      background: url(/static/images/bracket_tools.png) no-repeat center center;

      @media screen and (max-width: $MOBILE-WIDTH) {
        display: none;
      }
    }

    &__text {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      h2 {
        font: 700 48px/1 'Roboto', sans-serif;
        color: get-color(dark-green);
        margin-bottom: 30px;

        @media screen and (max-width: $MOBILE-WIDTH) {
          font-size: 36px;
        }
      }

      h3 {
        font: 700 36px/1.2 'Roboto', sans-serif;
        color: get-color(black);
        margin-bottom: 20px;

        @media screen and (max-width: $MOBILE-WIDTH) {
          font-size: 24px;
        }
      }

      p {
        font: 24px/1.2 'Roboto', sans-serif;
        color: get-color(black);

        @media screen and (max-width: $MOBILE-WIDTH) {
          font-size: 18px;
        }
      }

      &--inverse {
        h2 {
          color: get-color(light-green);
        }

        h3 {
          color: get-color(white);
        }

        p {
          color: get-color(white);
        }
      }
    }

    &__links {
      margin-top: 40px;

      li {
        display: inline-block;
        padding-left: 20px;

        &:first-child {
          padding: 0;
        }

        @media screen and (max-width: $MOBILE-WIDTH) {
          padding: 0;
          .inverse-small-button {
            padding-right: 0;
          }
        }
      }
    }

    &__bracket-list {
      width: 50%;
      margin-top: 50px;
      padding-bottom: 20px;

      h2 {
        font: 700 36px/1.2 'Roboto', sans-serif;
        color: get-color(white);
      }

      li {
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: 20px;
      }

      a {
        font: 18px/1.2 'Roboto', sans-serif;
        color: get-color(white);
        text-decoration: none;
      }

      img {
        flex-shrink: 0;
        display: block;
        margin-right: 20px;
        width: 50px;
        height: 50px;
        box-shadow: 0 0 7px 2px rgba(#000, .7);
      }

      @media screen and (max-width: $MOBILE-WIDTH) {
        width: 100%;
      }
    }
  }
}