1/*
2 * @file
3 * Provides the layout styles for four-column layout section.
4 */
5
6@import "../base/variables.pcss.css";
7
8.layout--fourcol-section {
9  display: flex;
10  flex-wrap: wrap;
11
12  & > .layout__region {
13    flex: 1 0 100%;
14    margin-block-end: var(--grid-gap);
15
16    @media (--md) {
17      flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
18      flex-grow: 0;
19      flex-shrink: 0;
20      margin-block-end: 0;
21    }
22  }
23
24  /* Two column layout. */
25  @media (--md) {
26    & > .layout__region--first,
27    & > .layout__region--second {
28      margin-block-end: var(--grid-gap--md);
29    }
30
31    & > .layout__region--first,
32    & > .layout__region--third {
33      margin-inline-end: calc(var(--grid-gap--md) * 0.5);
34    }
35
36    & > .layout__region--second,
37    & > .layout__region--fourth {
38      margin-inline-start: calc(var(--grid-gap--md) * 0.5);
39    }
40  }
41
42  /* Four column layout. */
43  @media (--lg) {
44    & > .layout__region {
45      flex-basis: calc(25% - (var(--grid-gap--md) * 0.75));
46    }
47
48    & > .layout__region--first,
49    & > .layout__region--second {
50      margin-block-end: 0;
51    }
52
53    & > .layout__region--first {
54      margin-inline-end: calc(var(--grid-gap--md) * 0.5);
55    }
56
57    & > .layout__region--second,
58    & > .layout__region--third {
59      margin-inline: calc(var(--grid-gap--md) * 0.5);
60    }
61
62    & > .layout__region--fourth {
63      margin-inline-start: calc(var(--grid-gap--md) * 0.5);
64    }
65  }
66}
67