section.show-default-header {
    margin-top: var(--header-height);
    position: relative;
}

section.show-default-header img{
    max-height: 100vh;
    aspect-ratio: 16/9;
}

section.show-default-header .vail {
   background-image: linear-gradient(180deg, #000,transparent);
   width: 100%;
   height: 10rem;
   position: absolute;
   top: 0;
   pointer-events: none;
   z-index: 30;
   display: none;
}

@media (min-width: 801px) {
   section.show-default-header {
       margin-top: 0 !important;
   }

   section.show-default-header .vail {
        display: block;
   }
}


/* Live styling */
/* @media (min-width: 640px) {
   section.show-default-header {
       min-height: 304px;
   }

   section.show-default-header {
       min-height: 304px;
       height: 50vh;
   }
}

@media (min-width: 1024px) {
   section.show-default-header {
       min-height: 600px;
       height: 100vh;
       min-height: 100vh;
   }
} */

/*
ALTERNATIV STYLING 

section.show-default-header {
   margin-top: var(--header-height);
   max-width: unset !important;
   width: 100% !important;
   position: relative;
   padding-bottom: 100%;
   min-height: 304px;
   max-height: 50vh;
   padding-bottom: 56.25%;
}

section.show-default-header .vail {
   background-image: linear-gradient(180deg, #000,transparent);
   width: 100%;
   height: 10rem;
   position: absolute;
   top: 0;
   pointer-events: none;
   z-index: 30;
}

@media (min-width: 801px) {
   section.show-default-header {
       margin-top: 0 !important;
   }
}

@media (min-width: 1536px) {
   section.show-default-header {
       min-height: 600px;
       height: 100vh;
       min-height: 100vh;
   }
} 
*/