#hero{ }

#hero .grid > div{min-height: calc(50vh - 20px);
    display: flex;
  align-items: center;
  justify-content: space-between;
}

#hero .grid  > div:nth-child(2), #deck_2 .grid  > div{
    display: flex;
  align-items: center;
  justify-content: center;
}

.grid_1_1 .text_padding{max-width: calc(100% - 60px);}

.dark{color: white; background: #151515;}

@media(min-width: 840px){
    #hero .grid > div{min-height: 50vh;}

    #hero .grid{
        height: calc(100vh - 100px);
        max-height: 800px;
        
    }

    .grid_1_1 .text_padding{max-width: calc(100% - 150px);}

    #deck_2, #deck_3, #deck_4{
        padding: 7vh 0;
    }

}

.image_cover{position: relative; overflow: hidden;}

.image_cover .background_slash{
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    overflow: hidden; 
}

.image_cover .background_slash .background_slanted{
    position: absolute; 
    top: 0; left: 0; 
    width: 50%; height: 100%; 
    transform: skewY(-45deg);
    
}

body .image_cover .background_slash .background_slanted > div{
    
    width: 0%; height: 20%;
    opacity: 0.6;
    display: block; 
    transition-duration: 0.5s;
}

body .image_cover .background_slash .background_slanted > div:nth-child(3){transition-delay: 0.1s;}
body .image_cover .background_slash .background_slanted > div:nth-child(5){transition-delay: 0.2s;}
body .image_cover .background_slash .background_slanted > div:nth-child(7){transition-delay: 0.3s;}

body.show .image_cover .background_slash .background_slanted > div{
    width: 100%;
}

body .image_cover .background_slash .background_slanted > div:nth-child(odd){
    background: var(--primary-color);
}

body .image_cover .section_title{
    position: absolute; top: 20px; left: calc(100% - 20px); 
    transform: rotate(90deg) translateX(0vw);
    transform-origin: top left;
    opacity: 0.6;
    
}

body .image_cover .section_title h1{
    color: var(--primary-color); 
    opacity: 0;
    transform: translateX(100px); 
    transition-duration: 2s;
    font-size: 6vw;
}

body.show .image_cover .section_title h1{transform: translateX(0); opacity: 1;}