#overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100001; } #overlay.visible { display: initial; } #overlay .bg { width: 100%; height: 100%; object-fit: cover; object-position: top; } #overlay .btn { background: #fff; padding: 1em; border-radius: 0.5em; width: 300px; height: 300px; max-width: 45vw; max-height: 45vw; border: 0; } #overlay .btn .label { color: #333; text-align: center; font-size: 1.25rem; font-weight: bold; } #overlay .btn img { height: 65%; object-fit: contain; object-position: center; } #overlay .btn img { height: 60%; } #overlay .link-wrapper { display: grid; grid-template-columns: repeat(2, minmax(auto, 1fr)); gap: 1em; position: absolute; height: 100vh; /*width: 100vw;*/ padding: 1rem; top: 0; bottom: 0; justify-content: center; justify-items: center; align-items: center; align-content: center; left: 50%; transform: translateX(-50%); } @supports (display: flex) and (gap: 1em) { /*#overlay .link-wrapper { display: flex; flex-direction: row; gap: 1em; }*/ #overlay .btn { display: flex; flex-direction: column; /*height: fit-content;*/ justify-content: space-around; gap: 0.5em; } } @supports (aspect-ratio: 1/1) { #overlay .btn { aspect-ratio: 1/1 } }