@media (max-width: 1438px) {
    #main-container {
        flex-direction: column;
    }

    .panel.active {
        width: 100%;
        max-width: 31.25rem;
    }
}

@media (max-width: 1024px) {
    main {
        gap: var(--space-lg);
        padding: var(--space-lg);
    }

    .panel {
        padding: var(--space-lg);
    }

    .preview-container {
        padding: var(--space-lg);
    }


}

@media (max-width: 768px) {
    header {
        padding: var(--space-lg);
    }

    header h1 {
        font-size: 1.5rem;
    }

    #nav {
        padding: var(--space-md) var(--space-lg);
        gap: var(--space-sm);
    }

    main {
        flex-direction: column;
        height: auto;
    }

    .panel {
        max-height: 25rem;
    }
}