@import "main/table-block.css";
@import "main/actions.css";

main {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 1rem;

    background: var(--bg-main-color);
    overflow: hidden;

    &.empty {
        align-items: center;
        justify-content: center;

        p {
            font-size: 2rem;
        }
    }

    .sections {
        position: relative;

        flex-grow: 1;

        display: grid;
        grid-template: repeat(2, 1fr) / repeat(2, 1fr);

        margin-top: 1rem;

        gap: 1rem;

        & > section {
            position: relative;

            background: var(--bg-main-color);
            border-radius: .25rem;

            box-shadow: var(--box-shadow-flat);

            transition: .3s all;
            overflow: hidden;
            z-index: 0;

            &:hover, &:focus-within {
                box-shadow: var(--box-shadow-pressed);
            }
        }
    }
}