.four-images-grid {padding: var(--padding);}
.four-images-grid .four-grid-wrapper {position: relative;display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 0.5rem;background-color: #fff;padding: 0.5em;}
.four-images-grid .four-grid-wrapper img { height: 100%; object-fit: cover; }
.four-images-grid .four-grid-wrapper > div {position: relative;overflow: hidden;}
.four-images-grid .four-grid-wrapper > div:nth-child(1) {grid-column: span 2;grid-row: span 2;}
.four-images-grid .four-grid-wrapper > div:nth-child(2) {grid-column: span 2;grid-row: span 1;}
.four-images-grid .four-grid-wrapper > div:nth-child(3),
.four-images-grid .four-grid-wrapper > div:nth-child(4) {grid-column: span 1;grid-row: span 1;}

@media all and (max-width: 600px){
  .four-images-grid .four-grid-wrapper {grid-gap: 0.25rem;}    
}