@import "variables";
@import "mixins";

section.hero {
  position: relative;
  padding: $space-md 0;
  .container {
    position: relative;
  }
  .hero-main {
    margin-bottom: $space-xs;
  }
  .hero-cta {
    a {
      display: block;
      padding: $space-sm;
      margin-bottom: $space-xs;
      &:last-child {
        margin-bottom: 0;
      }
      &[href=""] {
        pointer-events: none;
      }
    }
  }
  .video-overlay {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba($black, 0.3), rgba($black, 0));
    }
    video.hero-video {
      position: absolute;
      object-fit: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
