.root {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--spacing-120) 0;
    gap: var(--spacing-64);
}

.root[data-color-scheme='dark'] {
    background-color: var(--color-bg-fill-primary);
    color: var(--color-text-primary-inverted);
}


.headerContainer {
    width: 100%;
    max-width: var(--content-max-width);
    padding: 0 var(--spacing-120);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-24);
    overflow: hidden;
}

.mobile {
    display: none;
}

.mobileNavigation {
    display: none;
}

@media screen and (width <= 768px) {
    .root {
        padding: var(--spacing-64) var(--spacing-20);
        gap: var(--spacing-40);
    }

    .headerContainer {
        padding: 0 var(--spacing-20);
        flex-direction: column;
        align-items: flex-start;
    }

    .navigation {
        display: none;
    }

    .mobileNavigation {
        display: inline-flex;
    }

    .mobile {
        display: inline-flex;
    }

    .desktop {
        display: none;
    }
}