.parent{
    width: 80vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 80vh;
    align-content: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.5s ease;
    gap: 7px;
}
.child{
    color: #fff;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.123);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    transition: all 0.5s linear;
}
body{
  background: #485563;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #29323c, #485563);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}
.child1{
  background-image: url(screen-0.jpg);
  background-size: cover;
  background-position: center;
}
.child2{
  background-image: url(404756e81e4665e75c6900691b865198.jpg);
  background-size: cover;
  background-position: center;
}
.child3{
  background-image: url(142c5ff7be07ea802d1dce8ad99ea746.jpg);
  background-size: cover;
  background-position: center;
}
.child4{
  background-image: url("https://i.pinimg.com/originals/2d/09/5a/2d095a824d174e23fc380bf834f6b34a.jpg");
  background-size: cover;
  background-position: center;
}
.child5{
  background-image: url(HD-wallpaper-doctor-strange-doctor-doctorstrange-marvel-strange.jpg);
  background-size: cover;
  background-position: center;
}
      .child::before , .child::after{
        content: "";
        height: 20%;
        width: 100%;
        position: absolute;
        background: linear-gradient(to bottom, rgb(0, 0, 0), transparent);  
        transition: all 0.5S ease;
       
      }
      .child{
        position: relative;
        color: #fff;
        align-items: end;
        justify-content: center;
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
        

      }
      .child::before{
        left: 0;
        top: -3%;
      }
      .child::after{
        left: 0;
        bottom: -3%;
        transform: rotate(180deg);
      }
      .parent:hover:has(.child1:hover){
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
      }
      .parent:hover:has(.child2:hover){
          grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr;
    }
    .parent:hover:has(.child3:hover){
        grid-template-columns: 1fr 1fr 2.2fr 1fr 1fr;
      }
      .parent:hover:has(.child4:hover){
        grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr;
      }
      .parent:hover:has(.child5:hover){
        grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
      }

      .parent:hover:has(.child:hover) .child:not(.child:hover){
        filter: blur(2px)grayscale(0.5);
      }
      .child:hover{
        filter: brightness(1.2);
      }
      h1{
        margin-bottom: 50px;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    color: rgba(255, 255, 255, 0);
    transition: all 0.5s ease;
    letter-spacing: 2px;
    word-spacing: 5px;
    text-wrap: nowrap;
    overflow: hidden;
    width: max-content;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-transform: capitalize;

      }
      
      .child:hover h1 {
        color: rgb(255, 255, 255);
        text-shadow: 2px 2px 5px black;
      }
      
      .child:hover::before,
  .child:hover::after {
    height: 15%;
  }