website/www/site/assets/scss/_hero-mobile.scss

/*!
 *  Licensed to the Apache Software Foundation (ASF) under one or more
 *  contributor license agreements.  See the NOTICE file distributed with
 *  this work for additional information regarding copyright ownership.
 *  The ASF licenses this file to You under the Apache License, Version 2.0
 *  (the "License"); you may not use this file except in compliance with
 *  the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import "media";

.hero-mobile {
  position: relative;
  margin-bottom: 0;
  display: none;
  width: 100%;
  height: calc(100% - 96px);
  min-height: 300px;
  .hero-content {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 506px;

    h3 {
      @extend .hero-title;

      text-transform: uppercase;
      margin: 0 auto 16px auto;
    }

    h1 {
      @extend .hero-heading;

      width: 300px;
      margin: 0 auto 24px auto;
    }

    h2 {
      @extend .hero-subheading;

      width: 300px;
      margin: 0 auto;
    }
  }
}

@media (max-width: $mobile) {
  .hero-mobile {
    display: inherit;
  }
}