.crossed {
    background: 
        linear-gradient(to top left,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) calc(50% - 0.8px),
            rgba(0,0,0,1) 50%,
            rgba(0,0,0,0) calc(50% + 0.8px),
            rgba(0,0,0,0) 100%),
        linear-gradient(to top right,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) calc(50% - 0.8px),
            rgba(0,0,0,1) 50%,
            rgba(0,0,0,0) calc(50% + 0.8px),
            rgba(0,0,0,0) 100%);
}

.vl {
    border-left: 6px solid green;
    height: 500px;
  }

.hero-img-div-right {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 0% 100%);
    border: #000;
  }

.hero-img-div-left {
    clip-path: polygon(0 0, 100% 0, 50% 100%, 0% 100%);
}


  .gallery  {
    --d: 30s; /* duration */
    
    /* display: grid; */
    overflow: hidden;
    mask: linear-gradient(90deg,#0000,#000 10% 90%,#0000);
  }
  .gallery > img {
    grid-area: 1/1;
    aspect-ratio: 1.5;
    object-fit: cover;
    animation: r var(--d) linear infinite;
  }
  .gallery > img:nth-child(2) {animation-delay: calc(1*var(--d)/-4)}
  .gallery > img:nth-child(3) {animation-delay: calc(2*var(--d)/-4)}
  .gallery > img:nth-child(4) {animation-delay: calc(3*var(--d)/-4)}
  
  @keyframes r {
    75%    {transform: translate(-300%)}
    75.01% {transform: translate( 100%)}
  }

  @keyframes slideOutFromTop {
    0% {
      
      opacity: 100;
    }
    50%{
        transform: translateY(0%);
    }
    99%{
        opacity: 100;
        
    }
    100% {
      transform: translateY(-100%);
      opacity: 0;
      
    }
  }



  .splash {
    opacity: 0;
    animation: 4s ease-out 0s 1 slideOutFromTop;
    pointer-events: none;
  
  }

  .loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    float: right;
    margin: 2rem;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 
    

    /* .svg-filter {
      filter: invert(0%) sepia(100%) saturate(7500%) hue-rotate(59deg) brightness(105%) contrast(111%);
    }

    @media (prefers-color-scheme:dark){
      .svg-filter{
        filter: invert(100%) sepia(0%) saturate(1806%) hue-rotate(347deg) brightness(106%) contrast(101%);
      }
    } */