.ping-pong { width: 100%; display: flex; flex-direction: row; align-items: center; margin-top: 80px; margin-bottom: 80px; } @media (max-width: 1000px) { .ping-pong { flex-direction: column; } } .ping-pong:nth-child(2n) { flex-flow: row-reverse; text-align: right; } @media (max-width: 1000px) { .ping-pong:nth-child(2n) { flex-direction: column; } } .ping-pong-image-container { position: relative; } @media (max-width: 1000px) { .ping-pong-image-container { margin-bottom: 20px; } } .ping-pong-image-container::after { box-shadow: inset 0px 0px 0px 16px rgba(0, 0, 0, 0.3); content: ''; display: block; height: 100%; position: absolute; top: 0; width: 100%; } .ping-pong-image-container>img { aspect-ratio: 16/9; object-fit: cover; width: 100%; } .ping-pong>div { margin-left: 50px; margin-right: 50px; max-width: 50%; } @media (max-width: 1000px) { .ping-pong>div { margin-left: 0px; margin-right: 0px; max-width: 80%; text-align: center; } }