.container
{
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.container .box
{
 position: relative;
  width: 300px;
  height: 300px;
  background: rgb(230, 211, 177);
  margin: 10px;
  box-sizing: border-box;
 /*  display: inline-block; */
}
.container .box .imgBox
{
  position: relative;
  overflow: hidden;
}
.box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container .box .imgBox img
{
  max-width: 100%;
  transition: transform 2s;
}
.container .box:hover .imgBox img
{
  transform: scale(1.2);
}
.container .box .details
{
  position: absolute;
  width: 80%;
  top: 10px;
  left: 25px;
  bottom: 10px;
  right: 10px;
  background:#adb5bd;
  transform: scaleY(0);
  transition: transform .5s;
}
.container .box:hover .details
{
  transform: scaleY(1);
}
.container .box .details .content
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 15px;
  color: #802105;
  width: 85%;
}
.container .box .details .content h1
{
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #963109;
  font-family: "Josefin Sans", sans-serif;
}
.container .box .details .content p
{
  margin: 10px 0 0;
  padding: 0;
  font-family: "Josefin Sans", sans-serif;
 
  
}

@media screen and (max-width: 768px) {
  .container {
    padding: 0;
  }
  .container .box {
  margin: 0;
  }

  }