@import '../../../sass/variables';

.hero_billboard {
  overflow: hidden;
  display: flex;

  @media (max-width: $screen-sm-max) {
    &:first-child {
      margin-top: -30px;
    }
  }

  @media (min-width: $screen-md-min) {
    &:first-child {
      margin-top: -100px;
    }
  }

  .image {
    position: absolute;
    width: 100vw;
    margin-inline-start: -50vw;
    left: 50%;
    z-index: -1;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      max-width: 100%;
      display: block;
    }

    .overlay {
      background-color: #000;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .text {
    display: flex;
    flex-direction: column;
    padding: 80px 0;
    width: 100%;

    h1,
    h2 {
      font-size: 70px;
      margin: 0 0 15px 0;
      padding: 0;
    }

    p {
      font-size: 22px;
      margin: 0;
      padding: 0;
    }

  }
}
