.swap-grid{display:grid;grid-template-columns:50% 50%;grid-column-gap:20px;grid-row-gap:20px}
.image-swap{position:relative;width:100%;cursor:pointer}
.image-swap img{display:block;width:100%;border-radius:8px;box-shadow:0 4px 8px #0000001a;transition:opacity 1.1s ease,transform 1.1s ease}
.image-swap .swap-top{position:absolute;top:0;left:0;opacity:1;transform:translateY(0)}
.swap-grid .image-swap:nth-child(1) .swap-top{transition-delay:0s}
.swap-grid .image-swap:nth-child(2) .swap-top{transition-delay:.2s}
.swap-grid .image-swap:nth-child(3) .swap-top{transition-delay:.4s}
.swap-grid .image-swap:nth-child(4) .swap-top{transition-delay:.6s}
@media (hover: hover) and (pointer: fine) {
.swap-grid:hover .image-swap .swap-top{opacity:0;transform:translateY(-4px)}
}
@media (max-width: 600px) {
.swap-grid{display:grid;grid-template-columns:100%;grid-column-gap:15px;grid-row-gap:15px}
}