@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes slide {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px);
  }
}

* {
  box-sizing: border-box;
}



section.gridanimation .box {
	display: grid;
	width: 400px;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 160px;
	border: 1px solid #ccc;
	/* background-color: #ccc; */
}

section.gridanimation .box:hover .item {
  color: #ffffff;
  cursor: pointer;
}

section.gridanimation .box:hover #item1 {
  background-position: left;
}

section.gridanimation .box:hover #item1 > #item1-initial {
  display: none;
}

section.gridanimation .box:hover #item1 > #item1-active {
	display: block;
	animation: fade 1s forwards, slide 0.5s forwards;
	z-index: 2;
	left: 20px;
	width: 250px !important;
}

section.gridanimation .box:hover #item2 {
  background-position: top;
}

section.gridanimation .box:hover #item3 {
  background-position: bottom;
}

section.gridanimation .box:hover #item4 {
  background-position: right;
}

section.gridanimation .box:hover #item5 {
  background-position: right;
}

section.gridanimation .item {
  width: 100%;
  height: 100%;
  text-align: center;
  transition: 0.3s ease-out;
}

 section.gridanimation #item1 {
  display: flex;
  justify-content: center;
  align-items: baseline;
  text-align: left;
  font-size: 2.4rem;
  background: linear-gradient(to left, white 50%, #43bccd 50%) right;
  background-size: 200%;
  transition: 0.2s ease-out;
}

section.gridanimation #item1-initial {
  z-index: 1;
  position: relative;
  top: 2rem;
  left: 2rem;
}

section.gridanimation #item1-active {
  display: none;
  position: relative;
  top: 2rem;
  left: 4rem;
}

section.gridanimation #item2 {
  background: linear-gradient(to top, white 50%, #43bccd 50%) bottom;
  background-size: 200% 200%;
}

section.gridanimation #item3 {
  background: linear-gradient(to bottom, white 50%, #43bccd 50%) top;
  background-size: 200% 200%;
  display: flex;
  position: relative;
}

section.gridanimation #item3-initial {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  opacity: 0.8;
}

section.gridanimation #item4 {
  background: linear-gradient(to right, white 50%, #43bccd 50%) left;
  background-size: 200%;
  transition: 0.4s ease-out;
}

section.gridanimation #item5 {
  background: linear-gradient(to right, white 50%, #43bccd 50%) left;
  background-size: 200%;
  transition: 0.4s ease-out;
  grid-area: 1 / 1 / 3 / 3;
}


section.gridanimation .container{
     display :flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 1400px;
}

section.gridanimation .box{
    width: calc(25% - 20px);
    margin: 10px;
}




/* Mobile screen size */
@media (max-width: 480px) {
    
    section.gridanimation .box{
    width: calc(100% - 20px);
    margin: 10px;
    }
    
}