body {
    margin: 0;
}

.main {
    display: block;
    padding-block: var(--genessio-space-lg, 64px);
    padding-inline: var(--genessio-space-lg, 16px);
    @media (min-width: 768px) {
        padding-inline: var(--genessio-space-2xl, 32px);
    }
}

.visually-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    inline-size: 1px;
}

genessio-select {
    margin-inline-start: auto;
    inline-size: fit-content;
}

genessio-footer-block p {
    margin-block: 0 var(--genessio-space-2xl, 32px);
}

genessio-footer-block ul {
    padding-inline-start: 0;
    margin-block: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--genessio-space-md, 8px) var(--genessio-space-2xl, 32px);
}

genessio-navigation-primary-item {
    z-index: 1000 !important;
}

genessio-footer-block p a {
    color: var(--genessio-color-interactive-primary-default) !important;
    text-decoration: underline;
    text-decoration-thickness: var(--genessio-border-width-sm, 1px);
    text-decoration-style: dashed;
    text-underline-offset: max(5px, 0.28em);
}

genessio-footer-block p a:hover {
    text-decoration-color: inherit;
    text-underline-offset: max(6px, 0.33em);
}

genessio-footer-block ul a {
    color: var(--genessio-color-text-primary);
    display: inline-block;
    font-size: var(--genessio-font-size-body-text-sm, 0.875rem);
    padding-block: var(--genessio-space-xs, 4px);
    text-decoration: none;
    transition-timing-function: ease;
    transition-property: text-underline-offset, color, text-decoration-color;
    transition-duration: 0.3s;
}

genessio-footer-block ul a:is(:hover, :focus, :focus-visible) {
    color: var(--genessio-color-text-primary);
    text-decoration:
        underline
        var(--genessio-border-width-sm, 1px)
        dashed;
    text-decoration-color: inherit;
    text-underline-offset: max(5px, 0.28em);
}

/* styles for mock content */
#mock {
    p {
        margin-block-start: var(--genessio-space-4xl, 64px);
        padding-inline: var(--genessio-space-lg, 16px);
        @media (min-width: 768px) {
            padding-inline: var(--genessio-space-2xl, 32px);
        }
    }
}

/* panel grid */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--genessio-space-4xl);
    font-family: var(--genessio-font-family-body-text, GenessioSans, 'Genessio Sans', Helvetica, Arial, sans-serif);
    font-size: var(--genessio-font-size-body-text-md, 1rem);

    @container (min-width: 768px) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #profile {
        margin-inline-start: var(--genessio-space-4xl);
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-areas: 'avatar content';
        grid-template-rows: fit-content;
        column-gap: var(--genessio-space-lg, 16px);

        & genessio-avatar {
            --genessio-size-icon-06: 72px;

            grid-area: avatar;
            display: block;
        }

        & .lockup {
            display: contents;

            & .account {
                grid-area: content;

                & .name {
                    font-family: var(--genessio-font-family-heading, GenessioSans, 'Genessio Sans', Helvetica, Arial, sans-serif);
                    font-size: var(--genessio-font-size-heading-sm, 1.5rem);
                }
            }

            & .info {
                grid-area: content;
                grid-row: 2;
            }

            & .language {
                grid-area: content;
                grid-row: 3;
            }

            & .logout {
                grid-area: content;
                grid-row: 4;
            }
        }
    }

    .content-column {
        max-width: 320px;
        margin-block: var(--genessio-space-md);
        line-height: var(--genessio-line-height-body-text);
    }

    & select {
        width: 100%;
    }

    & ul {
        display: flex;
        flex-direction: column;
        gap: var(--genessio-space-2xl);
        list-style: none;
        margin: 0;
        padding: 0;

        & p {
            font-size: var(--genessio-font-size-body-text-sm, 0.875rem);
        }
    }
}