Newer
Older
pre-www / src / assets / css / base / grid.css
:root{
    --grid-offset: 8.25vw;
    --grid-gutter: 0.75vw;
}

.row{
    @apply grid-container;
    .row, .row-fluid{
        @apply px-0 ml-0 w-full;
    }
}
/* .row{
    @apply px-5 mx-auto w-full;
    @screen md{
        @apply max-w-screen-md;
    }
    @screen lg{
        @apply max-w-screen-lg;
    }
    @screen xl{
        @apply max-w-screen-xl;
    }
    @screen 2xl{
        @apply max-w-screen-2xl;
    }
    .row, .row-fluid{
        @apply px-0;
    }
} */

.row-fluid{
    @apply px-2.5;
    .row, .row-fluid{
        @apply px-0;
    }
}

.columns{
    @apply flex flex-wrap -mx-2.5;
}

.column{
    @apply px-2.5;
}

.grid-container, .block-container{
    width: calc(100vw - var(--grid-offset));
    margin-left: calc(var(--grid-offset) - var(--grid-gutter));
    margin-right: calc(var(--grid-gutter) * 2);
    @apply px-[var(--grid-gutter)];
    .grid-container, .block-container{
        @apply w-full ml-0 mr-0 px-0;
    }
}

@layer utilities{
    .grid-container-offset{
        @apply ml-[120px] mr-auto max-w-none;
    }
}