@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);
        }
    }
}

.layout_4 {
    @include justify-self(center);
    @include align-items(center);
    @include grid;

    grid: {
        gap: min(2.08vw, 40px);
        template: {
            areas: "i4 p4 c4";
            columns: min(32.18vw, 618px) min(31.46vw, 604px) min(32.18vw, 618px);
        }
    }

    @include brp($b6) {
        grid: {
            gap: 25px;
            template: {
                areas:
                    "i4"
                    "p4"
                    "c4";
                rows: min(21.36vw, 199px) min(100vw, 542px) min(64.71vw, 241px);
                columns: 1fr;
            }
        }
    }

    @include brp($b7) {
        grid: {
            gap: 5px;
            template: {
                rows: min(28.36vw, 230px) min(100vw, 542px) auto;
            }
        }
    }

    .d1 { grid-area: i4; }
    .d2 { grid-area: p4; }
    .d3 { grid-area: c4; }
}

.layout_5_j {
    @include grid;

    grid: {
        gap: 20px;
        template: {
            areas:
                "s1 s2_title"
                "s1 s2_hotspots"
                "s1 s2_advice"
                "s1 s2_btn";
            rows: auto 1fr 28px 62px;
            columns: 0.36fr 1fr;
        }
    }

    @include brp($b7) {
        grid: {
            gap: 15px;
            template: {
                areas:
                    "s1 s2_title"
                    "s2_hotspots s2_hotspots"
                    "s2_advice s2_advice"
                    "s2_btn s2_btn";
                rows: auto 1fr 28px auto;
                columns: 1fr;
            }
        }
    }

    .e1 { grid-area: s1; }
    .e2 { grid-area: s2_title; }
    .e3 { grid-area: s2_hotspots; }
    .e4 { grid-area: s2_advice; }
    .e5 { grid-area: s2_btn; }
}

.highlight_product.layout_6_d  {
    @include center-flex-column;

    @include brp($b6) {
        @include grid;
        grid: {
            template: {
                areas: "w6" "c6";
                rows: auto 1fr;
            }
        }
    }

    .f1 { grid-area: w6; }
    .f2 { grid-area: c6; }
}