.blog-hero {
  position: relative;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  height: 90vh;

  @include lg-phone {
    max-height: 700px;
  }

  @include m-phone {
    max-height: 700px;
  }

  @include sm-phone {
    max-height: 700px;
  }

  .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65) !important;
    position: absolute;
  }

  .header-content {
    position: absolute;
    bottom: 80px;
    left: 80px;
    color: white;
    gap: 30px;

    @include lg-phone {
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      padding: 0 30px;
    }

    @include m-phone {
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      padding: 0 30px;
    }

    @include sm-phone {
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      padding: 0 30px;
    }

    .tag-container {
      padding: 10px 15px;
      border: 1px solid white;
      width: fit-content;
    }

    p {
      margin: 0;
    }

    h1 {
      margin: 0;
      font-size: 40px;
    }
  }
}