@use "./../components/nodes/news/news_hero_section";
@use "./../views/view.news_teasers_block.scss";

.block-views-blocknews-news-hero-block {
  margin-bottom: 80px;
}

.hero-slider-wrapper {
  position: relative;

  .splide-thumbnails {
    max-width: 627px;
    position: absolute;
    bottom: 32px;
    z-index: 2;
    right: 0;
    &--2 {
      max-width: 400px;
    }
    .splide__slide {
      border-radius: 10px;
      box-shadow: 4px 8px 8px 2px #00000033;
      border: none !important;
      overflow: hidden;
      &:not(.is-active) {
        &:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0.6;
          background-color: var(--dark-blue);
          transition: opacity 0.3s ease;
        }
        &:hover {
          &:after {
            opacity: 0;
          }
        }
      }
    }
  }
}