.contaiiner{
		width: 90%;
		padding: 20px;
		margin: 100px auto;	 
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	

	.box{
		width: 250px;
		margin: 0 10px;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
		transition: 1s;

	}
	.box img{
		display: block;
		width:100%;
		border-radius: 5px;
	}
	.box:hover{
		transform: scale(1.3);
		z-index: 2;
	}











    
.image-grid {
  --gap: 16px;
  --num-cols: 5;
  --row-height: 300px;

    padding: 40px;

    transition: 1s;
    
  box-sizing: border-box;
  padding: var(--gap);

  display: grid;
  grid-template-columns: repeat(var(--num-cols), 2fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}

.image-grid > img {
  width: 90%;
  height: 100%;
  object-fit: cover;
    transition: 1s;
}

.image-grid-col-2 {
  grid-column: span 2;
}

.image-grid-row-2 {
  grid-row: span 2;
}

    .image-grid 	 img:hover{
		transform: scale(1.5);
		z-index: 2;
	}
/* Anything udner 1024px */
@media screen and (max-width: 1024px) {
  .image-grid {
    --num-cols: 1;   
    --row-height: 800px;
    --row-width: 200px;
  }
    
    .image-grid > img {
 padding: 20px;
  width: 100%;
  height: 100%;
  object-fit: fill;
    transition: 1s;
}
    .image-grid 	 img:hover{
		transform: scale(1.1);
		z-index: 2;
	}

}