.banner-diagonal-blue{
  position:relative;
  overflow: hidden;
}
.banner-diagonal-blue:before{
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background: #081A28;
  opacity: 1;
  transform: skewX(-12deg) translateX(-60px);
  transform-origin: top left;
  z-index: 0;
  content: ""
}
.main-banner {
  position: relative;
  overflow: hidden;
}

.main-banner::before {
  content: '';
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  height: 80px;  
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: linear-gradient(
    to top,
    rgba(10, 37, 64, 0.55) 0%,
    rgba(10, 37, 64, 0.25) 60%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1)   0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0)   100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1)   0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0)   100%
  );
}
.splide__slide img{
  filter: grayscale(100%);
  transition: filter 0.3s ease;
  max-width:100px
}
.splide__slide img:hover{
  filter: grayscale(0%);
}
@media (max-width: 850px) {
.banner-diagonal-blue:before{
  display: none
}
}