/* -------------------------------------------
    Grid Lines
---------------------------------------------- */

@import '../config';
@import '../mixins';

.grid-lines-page .page-wrapper:before {
    --alpha-grid-line-offset: inherit;
    --alpha-grid-line-z-index: inherit;
    --alpha-grid-line-max-width: inherit;
    --alpha-grid-line-width: inherit;
    --alpha-grid-line-color: inherit;
    --alpha-grid-line-columns: inherit;

    content: "";
    position: absolute;
    top: 0;
    right: var(--alpha-grid-line-offset, 0);
    bottom: 0;
    left: var(--alpha-grid-line-offset, 0);
    margin-right: auto;
    margin-left: auto;
    pointer-events: none;
    z-index: var(--alpha-grid-line-z-index, 0);
    min-height: 100vh;
    max-width: var(--alpha-grid-line-max-width, 100%);
    border-right: var(--alpha-grid-line-width, 1px) solid var(--alpha-grid-line-color, #eee);
    background: linear-gradient(to right, var(--alpha-grid-line-color, #eee) var(--alpha-grid-line-width, 1px), transparent 0);
    background-repeat: repeat-x;
    background-size: calc(100% / var(--alpha-grid-line-columns, 6));

    @include mq(lg, 'max') {
        background-size: calc(100% / var(--alpha-grid-line-columns-tablet, 4));
    }

    @include mq(sm, 'max') {
        background-size: calc(100% / var(--alpha-grid-line-columns-mobile, 3));
    }
}