:host {
  display: block;

  div.background-image-container {
    color: white;
    position: relative;

    .background-image > img {
      background-color: var(--bs-info);
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
    }

    .container {
      position: relative;
      text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);

      &:before, &:after {
        content: '';
        display: block;
        width: var(--ds-banner-background-gradient-width);
        height: 100%;
        top: 0;
        position: absolute;
      }

      &:before {
        background: linear-gradient(to left, var(--ds-banner-text-background), transparent);
        left: calc(-1 * var(--ds-banner-background-gradient-width));

      }

      &:after {
        background: linear-gradient(to right, var(--ds-banner-text-background), transparent);
        right: calc(-1 * var(--ds-banner-background-gradient-width));
      }

      background-color: var(--ds-banner-text-background);
    }


    small.credits {
      a {
        color: inherit;
      }

      opacity: 0.3;
      position: absolute;
      right: var(--bs-spacer);
      bottom: 0;
    }
  }

  .jumbotron {
    background-color: transparent;
  }

  a {
    color: var(--ds-home-news-link-color);

    @include hover {
      color: var(--ds-home-news-link-hover-color);
    }
  }
}


