body { margin: 0; padding: 6ex 16vw; box-sizing: border-box; width: 100%; height: 100vh; font-family: sans-serif; } body * { margin: 0 auto; } video { display: block; max-width: 58vw; } h1, h3 { width: 58vw; margin: auto; } h3 { font-weight: 400; } footer { text-align: center; padding: 10px; } .tiles { padding: 6ex 0; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; position: relative; } .tile { margin: 1vw; cursor: pointer; overflow: hidden; min-width: 120px; min-height: 120px; width: 18vw; height: 18vw; } .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .tile img:hover { transform: scale(1.1); } @media only screen and (max-width: 442px) { body { padding: 6ex 4vw; } h1, h3 { width: 100%; } .tile { margin: 5px; width: 100%; height: 100%; } }