.bg-wrapper { width: 100%; height: 100vh; }
.bg-tile { width: 50%; }
.bg-tile > a { display: block; height: 100%; }
.overlay {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 50%);
  transition: background-color .3s ease-in-out;
}
.bg-tile a:hover .overlay, .bg-tile a:focus-visible .overlay { background-color: rgb(0 0 0 / 20%); }
.bg-tile a:focus-visible { outline-offset: -3px; }
.overlay .info { display: none; text-align: center; padding: 1em; background-color: rgb(0 0 0 / 40%); color: white; }
.bg-tile a:hover .info, .bg-tile a:focus-visible .info { display: block; animation: start-info .3s; }
@keyframes start-info { from { opacity: 0; transform: translateY(-20px); } }
.logo-wrapper { pointer-events: none; position: absolute; height: 100vh; width: 100%; z-index: 100; }
.logo { width: 80vw; height: 50vh; }
@media (min-width: 1200px) { .logo { width: 60vw; } }
@media (prefers-reduced-motion: reduce) { .bg-tile a .info { animation: none !important; } }