.grid-container
{
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
    gap: var(--grid-gap, 1rem);

    &.align-start { align-items: flex-start; }
    &.align-center { align-items: center; }
    &.align-end { align-items: flex-end; }
    &.align-stretch { align-items: stretch; }

    &.justify-start { justify-content: flex-start; }
    &.justify-center { justify-content: center; }
    &.justify-end { justify-content: flex-end; }
}

@media (max-width: 1360px) {
    .grid-container.breakpoint-1200
    {
        grid-template-columns: 1fr;
        &.align-start { text-align: start; }
        &.align-center { text-align: center; }
        &.align-end { text-align: end; }
    }
    .grid-container:is(.a-1200)
    {
        &.align-start, &.align-end
        {
            align-items: center;
            text-align: center;
        }
    }
}

@media (max-width: 991px) {
    .grid-container.breakpoint-992
    {
        grid-template-columns: 1fr;
        &.align-start { text-align: start; }
        &.align-center { text-align: center; }
        &.align-end { text-align: end; }
    }
    .grid-container:is(.a-1200, .a-992)
    {
        &.align-start, &.align-end
        {
            align-items: center;
            text-align: center;
        }
    }
}

@media (max-width: 767px) {
    .grid-container.breakpoint-768
    {
        grid-template-columns: 1fr;
        &.align-start { text-align: start; }
        &.align-center { text-align: center; }
        &.align-end { text-align: end; }
    }

    .grid-container:is(.a-1200, .a-992, .a-768)
    {
        &.align-start, &.align-end
        {
            align-items: center;
            text-align: center;
        }
    }
}