.grid-4 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
	/*grid-template-rows: repeat(2, 1fr);*/
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
}

.grid-4 > div > div {
	transition:all .3s ease-in-out;
	
}

.grid-4:hover > div > div {
	filter:blur(4px);
	
}

.grid-4:hover > div:hover > div{
	filter:blur(0px) !important;
}

.grid-4 > div{
	aspect-ratio:1;
	display:flex;
	position:relative;
	text-align:center;
	border:1px solid silver;
	font-family:var(--navfontname),HelveticaNeueETW01-65Md,sans-serif;
	
}

.grid-4 > div > div > div:first-child{
	color:white;
	
}

.grid-4 .offx{
	transform:translateY(50vh);
	transition:all .15s ease-in-out;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	
}

.grid-4 > div:hover .offx{
	transform:translateY(0);
	transition:all .15s ease-in-out;
	background-color: rgba(255, 255, 255, 1);
}

.grid-4 > div >  div[data-aos] > div:first-child{ 
	transition:all .4s ease-in-out;
	
}

.grid-4 > div:hover > div[data-aos] > div:first-child{ 
	transform:translateY(-50vh) !important;
}

.div-grid-1 { grid-area: 1 / 1 / 2 / 2; }
.div-grid-2 { grid-area: 1 / 2 / 2 / 3; }
.div-grid-3 { grid-area: 2 / 1 / 3 / 2; }
.div-grid-4 { grid-area: 2 / 2 / 3 / 3; }




@keyframes kenburns-1 {
  0% {
    
      background-position: 70px 0;
  }
  1.5625% {
      background-position: 90px 10px;
  }
  23.4375% {
      background-position: 20px 40px;
  }
  26.5625% {
      background-position: 50px 20px;
  }
  100% {
     background-position: 10px -30px;
  }
 
  100% {
      background-position: 0 0;
  }
}