body.layout-app {
    display: grid;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-rows: calc(48px + var(--spacing-6) * 2) 1fr;
    grid-template-areas:
        "logo . spacer-b notifications user"
        "cards cards cards cards cards";
    column-gap: var(--spacing-4);
}

.logo {
    grid-area: logo;
}

.spacer-a {
    grid-area: spacer-a;
    display: none;
}

.spacer-b {
    grid-area: spacer-b;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-6) 0;
}

.notifications-container {
    grid-area: notifications;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-6) 0;
}

.user-container {
    grid-area: user;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) 0;
}

.page-container {
    grid-area: cards;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-6);
    overflow: hidden;
    height: 100%;
    gap: var(--spacing-5);
}

.page-content {
    flex: 1;
    overflow-y: auto;
    margin: 0 calc(var(--spacing-6) * -1);
    padding: 0 var(--spacing-6);
}

@media (max-width: 639px) {
    body.layout-app {
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: calc(40px + var(--spacing-6) * 2) 1fr calc(40px + var(--spacing-6) * 2);
        grid-template-areas:
            "logo spacer-a notifications user"
            "cards cards cards cards"
            "spacer-b spacer-b spacer-b spacer-b";
    }

    .spacer-b {
        justify-content: center;
        padding: var(--spacing-6);
    }

    .user-container {
        padding-left: var(--spacing-6);
    }

    .page-container {
        padding: var(--spacing-4);
        gap: var(--spacing-4);
    }

    .page-content {
        margin: 0 calc(var(--spacing-4) * -1);
        padding: 0 var(--spacing-4);
    }
}

@media (min-width: 1080px) {
    body.layout-app {
        max-width: 1000px;
        margin: 0 auto;
    }

    .page-container {
        gap: var(--spacing-6);
    }
}

@media (min-width: 1920px) {
    body.layout-app {
        max-width: 1500px;
    }

    .page-container {
        padding: var(--spacing-8);
        gap: var(--spacing-8);
    }

    .page-content {
        margin: 0 calc(var(--spacing-8) * -1);
        padding: 0 var(--spacing-8);
    }
}

@media (min-width: 2560px) {
    body.layout-app {
        max-width: 2000px;
    }
}

@media (min-width: 3840px) {
    body.layout-app {
        max-width: 2500px;
    }
}