:root {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background-color: #222225;
        --font-color: #e8e9ed;
        --invert-font-color: #222225;
        --primary-color: #62c4ff;
        --secondary-color: #a3abba;
        --error-color: #ff3c74;
        --code-bg-color: #3f3f44;
        --block-background-color: #3f3f44;
    }
}

.terminal-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.terminal-card-grid .terminal-card {
    flex: 1 1 calc(50% - 1.5rem);
    max-width: calc(50% - 1.5rem);
}

.terminal-card header {
    margin-bottom: 0.75rem;
}

.terminal-card header h3 {
    margin: 0;
}

@media (max-width: 768px) {
    .terminal-card-grid .terminal-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}