/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /* * @file * Provides the layout styles for three-column layout section. */ .layout--threecol-section { display: flex; flex-wrap: wrap; } .layout--threecol-section > .layout__region { flex: 1 0 100%; margin-block-end: var(--grid-gap); } @media (min-width: 62.5rem) { .layout--threecol-section > .layout__region { flex-grow: 0; flex-shrink: 0; margin-block-end: 0; } } @media (min-width: 62.5rem) { .layout--threecol-section > .layout__region--first { margin-inline-end: calc(var(--grid-gap) * 0.5); } .layout--threecol-section > .layout__region--second { margin-inline: calc(var(--grid-gap) * 0.5); } .layout--threecol-section > .layout__region--third { margin-inline-start: calc(var(--grid-gap) * 0.5); } .layout--threecol-section--25-50-25 > .layout__region--first, .layout--threecol-section--25-50-25 > .layout__region--third { flex-basis: calc(25% - (var(--grid-gap) * 0.5)); } .layout--threecol-section--25-50-25 > .layout__region--second { flex-basis: calc(50% - var(--grid-gap)); } .layout--threecol-section--25-25-50 > .layout__region--first, .layout--threecol-section--25-25-50 > .layout__region--second { flex-basis: calc(25% - (var(--grid-gap) * 0.5)); } .layout--threecol-section--25-25-50 > .layout__region--third { flex-basis: calc(50% - var(--grid-gap)); } .layout--threecol-section--50-25-25 > .layout__region--first { flex-basis: calc(50% - var(--grid-gap)); } .layout--threecol-section--50-25-25 > .layout__region--second, .layout--threecol-section--50-25-25 > .layout__region--third { flex-basis: calc(25% - (var(--grid-gap) * 0.5)); } .layout--threecol-section--33-34-33 > .layout__region--first, .layout--threecol-section--33-34-33 > .layout__region--second, .layout--threecol-section--33-34-33 > .layout__region--third { flex-basis: calc(33.33% - (var(--grid-gap) * 0.667)); } }