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