@import "instance";

.layout_1 {
    @include grid;

    grid: {
        template: {
            areas: "v1 c1" ;
            columns: max-content 1fr;
        }
    }

    @include brp($b3) {
        grid-gap: 2vw;
    }

    @include brp($b5) {
        @include justify-items(center);

        grid: {
            gap: 8vw;
            template: {
                areas: "v1" "c1";
                columns: 1fr;
            }
        }
    }

    .a1 { grid-area: v1; }
    .a2 { grid-area: c1; }
}

.layout_2 {
    @include grid;

    grid: {
        gap: 50px;
        template: {
            areas: "i2 c2" ;
            columns: 120px 1fr;
        }
    }

    @include brp($b8) {
        grid: {
            gap: 0px;
            template: {
                areas: "c2";
                columns: 1fr;
            }
        }
    }

    .b1 { grid-area: i2; }
    .b2 { grid-area: c2; }
}

.layout_3 {
    @include justify-items(center);
    @include align-items(center);
    @include grid;
    grid: {
        gap: min(0.78vw, 15px);
        template: {
            columns: repeat(4, 1fr);
            rows: repeat(3, auto);
        }
    }

    @include brp($b6) {
        grid: {
            gap: min(1.53vw, 15px);
        }
    }
}