.columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

.columns__col {
    min-width: 0;
    box-sizing: border-box;
}

/* Column ratio variants */
.columns--1-1 > .columns__col                { flex: 1 1 0; }
.columns--2-3 > .columns__col:nth-child(1)   { flex: 2 1 0; }
.columns--2-3 > .columns__col:nth-child(2)   { flex: 3 1 0; }
.columns--3-2 > .columns__col:nth-child(1)   { flex: 3 1 0; }
.columns--3-2 > .columns__col:nth-child(2)   { flex: 2 1 0; }
.columns--1-2 > .columns__col:nth-child(1)   { flex: 1 1 0; }
.columns--1-2 > .columns__col:nth-child(2)   { flex: 2 1 0; }
.columns--2-1 > .columns__col:nth-child(1)   { flex: 2 1 0; }
.columns--2-1 > .columns__col:nth-child(2)   { flex: 1 1 0; }
.columns--1   > .columns__col                { flex: 1 1 100%; }

/* Gap variants */
.columns--gap-sm   { gap: 32px; }
.columns--gap-md   { gap: 80px; }
.columns--gap-lg   { gap: 120px; }
.columns--gap-none { gap: 0; }

/* Vertical alignment */
.columns--align-start   { align-items: flex-start; }
.columns--align-center  { align-items: center; }
.columns--align-end     { align-items: flex-end; }
.columns--align-stretch { align-items: stretch; }

/* Reverse column order on desktop */
.columns--reverse > .columns__col:first-child { order: 2; }
.columns--reverse > .columns__col:last-child  { order: 1; }

/* Images inside columns never overflow their column */
.columns__col img,
.columns__col .img-block,
.columns__col .img-block__img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .columns {
        flex-direction: column;
        gap: 48px;
    }

    .columns__col {
        flex: 1 1 100% !important;
        width: 100%;
    }

    .columns--gap-sm { gap: 24px; }
    .columns--gap-md { gap: 40px; }
    .columns--gap-lg { gap: 48px; }

    .columns--reverse > .columns__col:first-child { order: unset; }
    .columns--reverse > .columns__col:last-child  { order: unset; }
}