.widget-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--wowp-gap);
}

.top-widgets {
    order: 1;
    grid-area: 1 / 2 / 2 / 3;
}

.top-title {
    order: 1;
    grid-area: 1 / 2 / 2 / 3;
    margin-bottom: var(--wowp-gap);
}

.content {
    order: 3;
    grid-area: 2 / 2 / 4 / 3;
    
}

#main {
    display: flex;
    flex-direction: column;
    gap: var(--wowp-gap);
}

.left-widgets {
    order: 4;
    grid-area: 1 / 1 / 3 / 2;
    @media screen(xl){
    padding-left: var(--wowp-gap);
    min-width: 420px;
    max-width: 420px;
    }
}

.right-widgets {
    order:0;
    grid-area: 1 / 3 / 3 / 6;
    @media screen(xl){
    padding-right: var(--wowp-gap);
    min-width: 420px;
    }
}

.bottom-widgets {
    order: 5;
    grid-area: 4 / 2 / 4 / 3;
}

.widget{
    @apply bg-glass p-2 shadow text-center;

    h3{
        font-size: 1.3em;
        font-weight: bold;
    }
}