.hero{
position:relative;
height:80vh;
overflow:hidden;
}

/* hero image */

.hero-image{
position:absolute;
width:100%;
height:100%;
background-size:cover;
background-position:center;
transition:background-image 0.8s ease;
}

/* grid overlay */

.hero-grid{
position:absolute;
width:100%;
height:100%;
display:grid;
grid-template-columns:repeat(6,2fr);
/* grid-template-rows:repeat(4,1fr); */
z-index:2;
}

.grid-box{
background:rgba(0, 0, 0, .5);
opacity:1;
transform:scale(1);
transition:all 0.6s ease;
}

.grid-box.hide{
opacity:0;
transform:scale(0.8);
}

.hero-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
text-align:center;
z-index:3;
font-size:40px;
text-shadow: 2px 3px 5px #fff;
text-transform: uppercase;
}

.shine-img{
position:relative;
overflow:hidden;
height: 176px;
background-size: cover;
}

.shine-card {
    min-height: 357px;
}
.shine-img img{
display:block;
width:100%;
transition:transform 0.4s ease;
}


/* shine layer */

.shine-img::before{
content:"";
position:absolute;
top:0;
left:-75%;
width:30%;
height:100%;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.8) 70%,
rgba(255,255,255,0) 100%
);
transform:skewX(-25deg);
z-index: 2;
}

/* animation on hover */

.shine-img:hover::before{
animation:shine 0.9s;
}

@keyframes shine{
100%{
left:125%;
}
}

/* optional zoom effect */

.shine-img:hover img{
transform:scale(1.05);
}
.caption-images {
    position: absolute;
    z-index: 2;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: stretch;
    color: #fff;
    font-size: 19px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    white-space: normal;
    background: rgba(0, 0, 0, .5);
    margin-bottom: 0;
}