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

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

    grid: {
        gap: 50px;
        template: {
            areas: "h7" "i7" "f7";
            rows: 106px min(30.99vw, 595px) auto;
        }
    }

    @include brp($b7) {
        grid: {
            gap: 50px;
            template: {
                areas: "h7" "i7" "f7";
                rows: 106px 84vw auto;
            }
        }
    }

    .g1 { grid-area: h7; }
    .g2 { grid-area: i7; }
    .g3 { grid-area: f7; }
}

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

    grid: {
        gap: 50px;
        template: {
            areas: "i8" "h8" ;
            rows: min(30.99vw, 595px) auto;
        }
    }

    @include brp($b7) {
        grid: {
            gap: 50px;
            template: {
                areas: "i8" "h8";
                rows: 84vw auto;
            }
        }
    }

    .h1 { grid-area: i8; }
    .h2 { grid-area: h8; }
}

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

    grid: {
        gap: clamp(5px, 2.60vw, 50px);
        template: {
            areas:
                "i9 i9 i9"
                "d9 h9 s9"
                "d9 b9 s9"
            ;
            rows: min(30.99vw, 595px) auto 0;
        }
    }

    @include brp($b7) {
        grid: {
            gap: clamp(15px, 6.51vw, 50px);
            template: {
                areas: "h9 h9" "i9 i9" "s9 d9" "b9 b9";
                rows: auto 84vw auto auto;
                columns: 20.83vw 1fr;
            }
        }
    }

    .i1 { grid-area: i9; }
    .i2 { grid-area: h9; }
    .i3 { grid-area: d9; }
    .i4 { grid-area: s9; }
    .i5 { grid-area: b9; }
}

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

    grid: {
        gap: 50px;
        template: {
            areas: "i10" "h10" "f10";
            rows: min(28.13vw, 540px) auto auto;
        }
    }

    @include brp($b7) {
        grid: {
            gap: 50px;
            template: {
                areas: "i10" "h10" "f10";
                rows: 84vw auto auto;
            }
        }
    }

    .j1 { grid-area: i10; }
    .j2 { grid-area: h10; }
    .j3 { grid-area: f10; }
}