.pk-grid-container,
.pk-grid-container--full {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    column-gap: var(--pk-column-gap);
    /*
    gap: 10px;
    padding: 10px 20px;
    */
}
.pk-grid-container {
    max-width: var(--pk-container-width);
}

.pk-grid-container.center{
    align-items: center;
}

.span-1 {
    grid-column-end: span 1;
}
.span-2 {
    grid-column-end: span 2;
}
.span-3 {
    grid-column-end: span 3;
}
.span-4 {
    grid-column-end: span 4;
}
.span-5 {
    grid-column-end: span 5;
}
.span-6 {
    grid-column-end: span 6;
}
.span-7 {
    grid-column-end: span 7;
}
.span-8 {
    grid-column-end: span 8;
}
.span-9 {
    grid-column-end: span 9;
}
.span-10 {
    grid-column-end: span 10;
}
.span-11 {
    grid-column-end: span 11;
}
.span-12 {
    grid-column-end: span 12;
}
.offset-0 {
    grid-column-start: 1;
}
.offset-1 {
    grid-column-start: 2;
}
.offset-2 {
    grid-column-start: 3;
}
.offset-3 {
    grid-column-start: 4;
}
.offset-4 {
    grid-column-start: 5;
}
.offset-5 {
    grid-column-start: 6;
}
.offset-6 {
    grid-column-start: 7;
}
.offset-7 {
    grid-column-start: 8;
}
.offset-8 {
    grid-column-start: 9;
}
.offset-9 {
    grid-column-start: 10;
}
.offset-10 {
    grid-column-start: 11;
}
.offset-11 {
    grid-column-start: 12;
}
.offset-12 {
    grid-column-start: 13;
}

@media (width > 1200px ) {
    .xl-span-1 {
        grid-column-end: span 1;
    }
    .xl-span-2 {
        grid-column-end: span 2;
    }
    .xl-span-3 {
        grid-column-end: span 3;
    }
    .xl-span-4 {
        grid-column-end: span 4;
    }
    .xl-span-5 {
        grid-column-end: span 5;
    }
    .xl-span-6 {
        grid-column-end: span 6;
    }
    .xl-span-7 {
        grid-column-end: span 7;
    }
    .xl-span-8 {
        grid-column-end: span 8;
    }
    .xl-span-9 {
        grid-column-end: span 9;
    }
    .xl-span-10 {
        grid-column-end: span 10;
    }
    .xl-span-11 {
        grid-column-end: span 11;
    }
    .xl-span-12 {
        grid-column-end: span 12;
    }
    .xl-offset-0 {
        grid-column-start: 1;
    }
    .xl-offset-1 {
        grid-column-start: 2;
    }
    .xl-offset-2 {
        grid-column-start: 3;
    }
    .xl-offset-3 {
        grid-column-start: 4;
    }
    .xl-offset-4 {
        grid-column-start: 5;
    }
    .xl-offset-5 {
        grid-column-start: 6;
    }
    .xl-offset-6 {
        grid-column-start: 7;
    }
    .xl-offset-7 {
        grid-column-start: 8;
    }
    .xl-offset-8 {
        grid-column-start: 9;
    }
    .xl-offset-9 {
        grid-column-start: 10;
    }
    .xl-offset-10 {
        grid-column-start: 11;
    }
    .xl-offset-11 {
        grid-column-start: 12;
    }
    .xl-offset-12 {
        grid-column-start: 13;
    }
}


@media (992px < width < 1200px ) {
    .lg-span-1 {
        grid-column-end: span 1;
    }
    .lg-span-2 {
        grid-column-end: span 2;
    }
    .lg-span-3 {
        grid-column-end: span 3;
    }
    .lg-span-4 {
        grid-column-end: span 4;
    }
    .lg-span-5 {
        grid-column-end: span 5;
    }
    .lg-span-6 {
        grid-column-end: span 6;
    }
    .lg-span-7 {
        grid-column-end: span 7;
    }
    .lg-span-8 {
        grid-column-end: span 8;
    }
    .lg-span-9 {
        grid-column-end: span 9;
    }
    .lg-span-10 {
        grid-column-end: span 10;
    }
    .lg-span-11 {
        grid-column-end: span 11;
    }
    .lg-span-12 {
        grid-column-end: span 12;
    }
    .lg-offset-0 {
        grid-column-start: 1;
    }
    .lg-offset-1 {
        grid-column-start: 2;
    }
    .lg-offset-2 {
        grid-column-start: 3;
    }
    .lg-offset-3 {
        grid-column-start: 4;
    }
    .lg-offset-4 {
        grid-column-start: 5;
    }
    .lg-offset-5 {
        grid-column-start: 6;
    }
    .lg-offset-6 {
        grid-column-start: 7;
    }
    .lg-offset-7 {
        grid-column-start: 8;
    }
    .lg-offset-8 {
        grid-column-start: 9;
    }
    .lg-offset-9 {
        grid-column-start: 10;
    }
    .lg-offset-10 {
        grid-column-start: 11;
    }
    .lg-offset-11 {
        grid-column-start: 12;
    }
    .lg-offset-12 {
        grid-column-start: 13;
    }
}
@media (767px < width < 992px) {
    .pk-grid-container,
    .pk-grid-container--full {
        grid-template-columns: repeat(8, minmax(0,1fr));
    }

    .md-span-1 {
        grid-column-end: span 1;
    }
    .md-span-2 {
        grid-column-end: span 2;
    }
    .md-span-3 {
        grid-column-end: span 3;
    }
    .md-span-4 {
        grid-column-end: span 4;
    }
    .md-span-5 {
        grid-column-end: span 5;
    }
    .md-span-6 {
        grid-column-end: span 6;
    }
    .md-span-7 {
        grid-column-end: span 7;
    }
    .md-span-8 {
        grid-column-end: span 8;
    }
    .md-offset-0 {
        grid-column-start: 1;
    }
    .md-offset-1 {
        grid-column-start: 2;
    }
    .md-offset-2 {
        grid-column-start: 3;
    }
    .md-offset-3 {
        grid-column-start: 4;
    }
    .md-offset-4 {
        grid-column-start: 5;
    }
    .md-offset-5 {
        grid-column-start: 6;
    }
    .md-offset-6 {
        grid-column-start: 7;
    }
    .md-offset-7 {
        grid-column-start: 8;
    }
}
@media (width < 767px ) {
    .pk-grid-container,
    .pk-grid-container--full {
        grid-template-columns: repeat(5, minmax(0,1fr));
    }

    .sm-span-1 {
        grid-column-end: span 1;
    }
    .sm-span-2 {
        grid-column-end: span 2;
    }
    .sm-span-3 {
        grid-column-end: span 3;
    }
    .sm-span-4 {
        grid-column-end: span 4;
    }
    .sm-span-5 {
        grid-column-end: span 5;
    }
    .sm-offset-0 {
        grid-column-start: 1;
    }
    .sm-offset-1 {
        grid-column-start: 2;
    }
    .sm-offset-2 {
        grid-column-start: 3;
    }
    .sm-offset-3 {
        grid-column-start: 4;
    }
    .sm-offset-4 {
        grid-column-start: 5;
    }
}