.text-image {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-gap: calc(var(--gutter-width) * 1.5);

    @media(min-width: 1200px) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: calc(var(--gutter-width) * 3);
    }

    .text-column {
        padding-left: var(--gutter-width);
        padding-right: var(--gutter-width);
        @media(min-width: 992px) {
            padding-left: 0;
            padding-right: 0;
        }
    }
    &.text-image--left {
        @media(min-width: 1200px) {
            grid-template-columns: 1fr 1.25fr;
        }
        .text-column {
            grid-column: 1;
            grid-row: 2;
            @media(min-width: 1200px) {
                grid-column: 2;
                grid-row: 1;
            }
        }
        .image-column {
            grid-column: 1;
            grid-row: 1;
            @media(min-width: 1200px) {
                grid-column: 1;
                grid-row: 1;
            }
        }
    }
    &.text-image--right {
        @media(min-width: 1200px) {
            grid-template-columns: 1.25fr 1fr;
        }
        .text-column {
            grid-column: 1;
            grid-row: 2;
            @media(min-width: 1200px) {
                grid-column: 1;
                grid-row: 1;
            }
        }
        .image-column {
            grid-column: 1;
            grid-row: 1;
            @media(min-width: 1200px) {
                grid-column: 2;
                grid-row: 1;
            }
        }
    }
}