body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

}


h1 {
    margin: 2em 0;

}


img {
    width: 100%;
}


.container {
    width: 95%;
    margin: 0 auto;
}



.grid {
    display: flex;
}


.grid-col {
    flex: 1;
    padding: 0 .1em

}

     /* hide two middle */
.grid-col--2, .grid-col--3 {
     display: none;

}



.content {
    opacity:.6;
    position: absolute;
    background: rgba(0, 0, 0, .8);
    color:white;
    margin-top: .2em;
}

  h2 {
    margin: .2em .5em;
    font-size: .7em;
}





 @media ( min-width: 768px )  {
    .container {
        width: 90%;
}
  h1 {

margin: 3em 0;
}

h2 {
    margin: .2em .5em;
    font-size: 1em;
}


.grid-col--2 {
             display: block;}

.grid-col {
    padding: 0 .5em

}

img {
   margin-bottom: .8em;
    }

.content {
    margin-top: 1em;

opacity:0;
transform: translateX(-.5em);
transition: all 2s;
will-change: opacity, transform;

}



.grid-item:hover {
    cursor: pointer;

}
 .grid-item:hover .content{

        opacity:1;
        transform: translateX(0);


}


    }


 @media ( min-width: 1080px )  {
   .grid-col--3 {
             display: block;}

   .container {
    width: 80%;

}

 h1 {
    margin: 1em 0;

}
h2 {
    margin: .2em .5em;
    font-size: 1em;
}

}