@layer blocks {
    .column-row {
        align-items: start;
        display: grid;
        gap: 30px;

        @media (width >= 48em) {
            grid-template-columns: var(
                --columns,
                repeat(auto-fit, minmax(var(--column-min-size, 375px), 1fr))
            );
        }

        .align-center & {
            align-items: center;
        }

        .no-gap & {
            gap: 0;
        }

        & .mobile-first-column {
            @media (width < 48em) {
                order: -1;
            }
        }
    }

    .columns-33-66 {
        --columns: 1fr 2fr;
    }

    .columns-66-33 {
        --columns: 2fr 1fr;
    }

    .columns-33-33-33 {
        --columns: repeat(3, 1fr);
    }
    .columns-wrapper {
        .layout-1,
        .layout-1-11 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 1;
                }

                .column:not(:first-child) {
                    grid-column: span 11;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-2,
        .layout-2-10 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 2;
                }
                .column:not(:first-child) {
                    grid-column: span 10;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-3,
        .layout-3-9 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 3;
                }

                .column:not(:first-child) {
                    grid-column: span 9;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-4,
        .layout-4-8 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 4;
                }

                .column:not(:first-child) {
                    grid-column: span 8;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-5,
        .layout-5-7 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 5;
                }

                .column:not(:first-child) {
                    grid-column: span 7;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-6,
        .layout-6-6 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 6;
                }

                .column:not(:first-child) {
                    grid-column: span 6;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-7,
        .layout-7-5 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 7;
                }

                .column:not(:first-child) {
                    grid-column: span 5;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-8,
        .layout-8-4 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 8;
                }

                .column:not(:first-child) {
                    grid-column: span 4;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-9,
        .layout-9-3 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 9;
                }

                .column:not(:first-child) {
                    grid-column: span 3;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-10,
        .layout-10-2 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 10;
                }

                .column:not(:first-child) {
                    grid-column: span 2;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
        .layout-11,
        .layout-11-1 {
            .column-row {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                .column:first-child {
                    grid-column: span 11;
                }

                .column:not(:first-child) {
                    grid-column: span 1;
                }
            }
            @media (width<48em) {
                .column-row {
                    grid-template-columns: 1fr;
                    .column:first-child,
                    .column:not(:first-child) {
                        grid-column: 1 / -1;
                    }
                }
            }
        }
    }
}