:root {
    color-scheme: dark;
    --page-bg: #09090b;
    --gap: #27272a;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --page-bg: #f8fafc;
        --gap: #e2e8f0;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--page-bg);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    grid-auto-rows: 1fr;
    gap: 2px;
    width: 100%;
    height: 100%;
    background: var(--gap);
}

.grid iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--page-bg);
}