.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);

    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: 1.4s ease;
}

/*	filter:grayscale(1) blur(8px);*/

.item {
    position: relative; overflow:hidden; 

}

.item:hover .overlay {
  bottom: 0;
  height: 100%;
  width: 100%;
}

.top-overlay {
    bottom: 100%;    
    height: 0;
}
.item:hover .top-overlay {
  bottom: 0;
}
.bottom-overlay {
    top: 100%;
	height:0;
}

.item:hover .bottom-overlay {
  top: 0;
}

.right-overlay {
    left: 100%;
    height: 100%;

}

.item:hover .right-overlay {
  left : 0;

}

.left-overlay {
    left: -100%;
    height: 100%;

}

.item:hover .left-overlay {
  left:0;
}

.fade-overlay {
    height: 100%;
    opacity: 0;
}

.item:hover .fade-overlay {
  opacity: 1;
}
.title-overlay {
    height: auto;
    top: auto;
    opacity: 0;
}
.item:hover .title-overlay {
    opacity: 1;
    height: auto;
    padding: 50px 0;
}
.text {
    color: white;
    font-size:clamp(14px, 1.2vw, 24px);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}


.fadeIn img {
    object-fit:cover;
  width: 100%;
  height: 100%; 
}



.blog {display:flex; flex-wrap:wrap;  align-items: center; justify-content:center;  flex-direction:row;   overflow:hidden;}

@media screen and (min-width: 1401px ) {.blog {column-gap:5px; row-gap:5px;} .fadeIn {	width:calc(20vw - 4px); height:15vw;}}
@media screen and (min-width: 1001px) and (max-width:1400px) { .blog {column-gap:4px; row-gap:4px;} .fadeIn {	width:calc(25vw - 3px); height:18vw;}}
@media screen and (min-width: 601px) and (max-width:1000px) { .blog {column-gap:3px; row-gap:3px;} .fadeIn {	width:calc(33.33333333vw - 2px); height:24vw;}}
@media screen and (max-width: 800px) {.blog {column-gap:2px; row-gap:2px;} .fadeIn {	width:calc(50vw - 1px); height:36vw;}}