.flex-container { display: flex; flex-direction: row; font-size: 30px; text-align: center; max-width: 50%; gap: 5px; margin-bottom: 5px; } .flex-item { display: block; background-color: #555555; color: #fff; padding: 10px; flex: 50%; border: 2px solid #555555; text-decoration: none; transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; } .flex-item--warning { background-color: #000; border-color: #000; } .flex-item.flex-item--warning:hover { background-color: #fff; color: #000; } .flex-item:hover { background-color: #fff; color: #555555; } @media (max-width: 800px) { .flex-container { flex-direction: column; max-width: 100%; } }