@use "./../views/view.news_page_block.scss";
@use "./../components/blocks/banner.scss";

.hero-section {
  position: relative;
  height: 400px;
  margin-bottom: 80px;

  &__bg-image {
    height: 100%;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(266deg, rgba(253, 1, 4, 0.20) 6.97%, rgba(0, 30, 97, 0.85) 64.24%);
    }
  }

  &__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 44px 32px;
    color: var(--white);
    z-index: 1;
  }
  h1 {
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
  }
}