:root{
    --grid-offset: 0;
    @screen md{
        --grid-offset: 120px;
    }
    --grid-gutter: 0.46875rem; /* 7.5px */
    @screen xl{
        --grid-gutter: 0.625rem; /* 10px */
    }
}

.grid-container, .block-container{
    @apply row;
    :where(.grid-container), :where(.block-container){
        @apply w-full ml-0 mr-0 px-0;
    }
}

.columns{
    @apply flex flex-wrap -mx-[var(--grid-gutter)];
}

.column{
    @apply px-[var(--grid-gutter)];
}

@layer utilities{
    .row{
        @apply w-full px-[calc(var(--grid-gutter)*2)] md:px-0;
        margin-left: var(--grid-offset);
        @screen md{
            width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2);
        }
        /* margin-right: calc(var(--grid-gutter) * 2); */
        @screen 2xl{
            max-width: theme(screens.2xl);
            margin-left: max(var(--grid-offset), calc((100vw - theme(screens.2xl))/2))
        }
    }
}