first commit

core/themes/olivero/css/layout/grid.css

@@ -0,0 +1,64 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Grid system.
+ */
+
+.grid-full {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
+  grid-column-gap: var(--grid-gap);
+
+  /* .grid-full classes nested 3 or more deep go full width. */
+}
+
+.grid-full .grid-full .grid-full {
+  display: block;
+}
+
+/*
+  If the .grid-full is nested within the following, apply the appropriate number of columns.
+    - .layout--content-narrow class.
+    - Element that's inheriting the layout--content-narrow styles from its parent region.
+*/
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow .grid-full,
+  .layout--pass--content-narrow > * .grid-full {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--content-narrow .grid-full,
+  .layout--pass--content-narrow > * .grid-full {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
+  }
+}
+
+/*
+  If the .grid-full is nested within the following, apply the appropriate number of columns.
+    - .layout--content-medium class.
+    - Element that's inheriting the layout--content-medium styles from its parent region.
+*/
+
+@media (min-width: 43.75rem) {
+  .layout--content-medium .grid-full,
+  .layout--pass--content-medium > * .grid-full {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--content-medium .grid-full,
+  .layout--pass--content-medium > * .grid-full {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
+  }
+}

core/themes/olivero/css/layout/grid.pcss.css

@@ -0,0 +1,50 @@
+/**
+ * @file
+ * Grid system.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.grid-full {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
+  grid-column-gap: var(--grid-gap);
+
+  /* .grid-full classes nested 3 or more deep go full width. */
+  & .grid-full .grid-full {
+    display: block;
+  }
+}
+
+/*
+  If the .grid-full is nested within the following, apply the appropriate number of columns.
+    - .layout--content-narrow class.
+    - Element that's inheriting the layout--content-narrow styles from its parent region.
+*/
+.layout--content-narrow .grid-full,
+.layout--pass--content-narrow > * .grid-full {
+  @media (--grid-md) {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
+  }
+
+  @media (--lg) {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
+  }
+}
+
+/*
+  If the .grid-full is nested within the following, apply the appropriate number of columns.
+    - .layout--content-medium class.
+    - Element that's inheriting the layout--content-medium styles from its parent region.
+*/
+.layout--content-medium .grid-full,
+.layout--pass--content-medium > * .grid-full {
+  @media (--grid-md) {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
+  }
+
+  @media (--lg) {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
+  }
+}

core/themes/olivero/css/layout/layout-builder-fourcol-section.css

@@ -0,0 +1,75 @@
+/*
+ * 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 four-column layout section.
+ */
+
+.layout--fourcol-section {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--fourcol-section > .layout__region {
+  flex: 1 0 100%;
+  margin-block-end: var(--grid-gap);
+}
+
+@media (min-width: 43.75rem) {
+  .layout--fourcol-section > .layout__region {
+    flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-block-end: 0;
+  }
+}
+
+/* Two column layout. */
+
+@media (min-width: 43.75rem) {
+  .layout--fourcol-section > .layout__region--first,
+  .layout--fourcol-section > .layout__region--second {
+    margin-block-end: var(--grid-gap);
+  }
+
+  .layout--fourcol-section > .layout__region--first,
+  .layout--fourcol-section > .layout__region--third {
+    margin-inline-end: calc(var(--grid-gap) * 0.5);
+  }
+
+  .layout--fourcol-section > .layout__region--second,
+  .layout--fourcol-section > .layout__region--fourth {
+    margin-inline-start: calc(var(--grid-gap) * 0.5);
+  }
+}
+
+/* Four column layout. */
+
+@media (min-width: 62.5rem) {
+  .layout--fourcol-section > .layout__region {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.75));
+  }
+
+  .layout--fourcol-section > .layout__region--first,
+  .layout--fourcol-section > .layout__region--second {
+    margin-block-end: 0;
+  }
+
+  .layout--fourcol-section > .layout__region--first {
+    margin-inline-end: calc(var(--grid-gap) * 0.5);
+  }
+
+  .layout--fourcol-section > .layout__region--second,
+  .layout--fourcol-section > .layout__region--third {
+    margin-inline: calc(var(--grid-gap) * 0.5);
+  }
+
+  .layout--fourcol-section > .layout__region--fourth {
+    margin-inline-start: calc(var(--grid-gap) * 0.5);
+  }
+}

core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css

@@ -0,0 +1,66 @@
+/*
+ * @file
+ * Provides the layout styles for four-column layout section.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--fourcol-section {
+  display: flex;
+  flex-wrap: wrap;
+
+  & > .layout__region {
+    flex: 1 0 100%;
+    margin-block-end: var(--grid-gap);
+
+    @media (--md) {
+      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin-block-end: 0;
+    }
+  }
+
+  /* Two column layout. */
+  @media (--md) {
+    & > .layout__region--first,
+    & > .layout__region--second {
+      margin-block-end: var(--grid-gap);
+    }
+
+    & > .layout__region--first,
+    & > .layout__region--third {
+      margin-inline-end: calc(var(--grid-gap) * 0.5);
+    }
+
+    & > .layout__region--second,
+    & > .layout__region--fourth {
+      margin-inline-start: calc(var(--grid-gap) * 0.5);
+    }
+  }
+
+  /* Four column layout. */
+  @media (--lg) {
+    & > .layout__region {
+      flex-basis: calc(25% - (var(--grid-gap) * 0.75));
+    }
+
+    & > .layout__region--first,
+    & > .layout__region--second {
+      margin-block-end: 0;
+    }
+
+    & > .layout__region--first {
+      margin-inline-end: calc(var(--grid-gap) * 0.5);
+    }
+
+    & > .layout__region--second,
+    & > .layout__region--third {
+      margin-inline: calc(var(--grid-gap) * 0.5);
+    }
+
+    & > .layout__region--fourth {
+      margin-inline-start: calc(var(--grid-gap) * 0.5);
+    }
+  }
+}

core/themes/olivero/css/layout/layout-builder-threecol-section.css

@@ -0,0 +1,72 @@
+/*
+ * 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));
+  }
+}

core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css

@@ -0,0 +1,79 @@
+/*
+ * @file
+ * Provides the layout styles for three-column layout section.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--threecol-section {
+  display: flex;
+  flex-wrap: wrap;
+
+  & > .layout__region {
+    flex: 1 0 100%;
+    margin-block-end: var(--grid-gap);
+
+    @media (--lg) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin-block-end: 0;
+    }
+  }
+}
+
+@media (--lg) {
+  .layout--threecol-section {
+    & > .layout__region--first {
+      margin-inline-end: calc(var(--grid-gap) * 0.5);
+    }
+
+    & > .layout__region--second {
+      margin-inline: calc(var(--grid-gap) * 0.5);
+    }
+
+    & > .layout__region--third {
+      margin-inline-start: calc(var(--grid-gap) * 0.5);
+    }
+  }
+
+  .layout--threecol-section--25-50-25 {
+    & > .layout__region--first,
+    & > .layout__region--third {
+      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+    }
+
+    & > .layout__region--second {
+      flex-basis: calc(50% - var(--grid-gap));
+    }
+  }
+
+  .layout--threecol-section--25-25-50 {
+    & > .layout__region--first,
+    & > .layout__region--second {
+      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+    }
+
+    & > .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__region--second,
+    & > .layout__region--third {
+      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+    }
+  }
+
+  .layout--threecol-section--33-34-33 {
+    & > .layout__region--first,
+    & > .layout__region--second,
+    & > .layout__region--third {
+      flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+    }
+  }
+}

core/themes/olivero/css/layout/layout-builder-twocol-section.css

@@ -0,0 +1,77 @@
+/*
+ * 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 two-column layout section.
+ */
+
+.layout--twocol-section {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--twocol-section > .layout__region {
+  flex: 1 0 100%;
+  margin-block-end: var(--grid-gap);
+}
+
+@media (min-width: 43.75rem) {
+  .layout--twocol-section > .layout__region {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-block-end: 0;
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .layout--twocol-section--50-50 > .layout__region--first {
+    flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+    margin-inline-end: calc(var(--grid-gap) * 0.5);
+  }
+
+  .layout--twocol-section--50-50 > .layout__region--second {
+    flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+    margin-inline-start: calc(var(--grid-gap) * 0.5);
+  }
+  .layout--twocol-section--33-67 > .layout__region--first {
+    flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+    margin-inline-end: calc(var(--grid-gap) * 0.3333);
+  }
+
+  .layout--twocol-section--33-67 > .layout__region--second {
+    flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+    margin-inline-start: calc(var(--grid-gap) * 0.6666);
+  }
+  .layout--twocol-section--67-33 > .layout__region--first {
+    flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+    margin-inline-end: calc(var(--grid-gap) * 0.6666);
+  }
+
+  .layout--twocol-section--67-33 > .layout__region--second {
+    flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+    margin-inline-start: calc(var(--grid-gap) * 0.3333);
+  }
+  .layout--twocol-section--25-75 > .layout__region--first {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+    margin-inline-end: calc(var(--grid-gap) * 0.25);
+  }
+
+  .layout--twocol-section--25-75 > .layout__region--second {
+    flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+    margin-inline-start: calc(var(--grid-gap) * 0.75);
+  }
+  .layout--twocol-section--75-25 > .layout__region--first {
+    flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+    margin-inline-end: calc(var(--grid-gap) * 0.75);
+  }
+
+  .layout--twocol-section--75-25 > .layout__region--second {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+    margin-inline-start: calc(var(--grid-gap) * 0.25);
+  }
+}

core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css

@@ -0,0 +1,84 @@
+/*
+ * @file
+ * Provides the layout styles for two-column layout section.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--twocol-section {
+  display: flex;
+  flex-wrap: wrap;
+
+  & > .layout__region {
+    flex: 1 0 100%;
+    margin-block-end: var(--grid-gap);
+
+    @media (--md) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin-block-end: 0;
+    }
+  }
+}
+
+@media (--md) {
+  .layout--twocol-section--50-50 {
+    & > .layout__region--first {
+      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+      margin-inline-end: calc(var(--grid-gap) * 0.5);
+    }
+
+    & > .layout__region--second {
+      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+      margin-inline-start: calc(var(--grid-gap) * 0.5);
+    }
+  }
+
+  .layout--twocol-section--33-67 {
+    & > .layout__region--first {
+      flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+      margin-inline-end: calc(var(--grid-gap) * 0.3333);
+    }
+
+    & > .layout__region--second {
+      flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+      margin-inline-start: calc(var(--grid-gap) * 0.6666);
+    }
+  }
+
+  .layout--twocol-section--67-33 {
+    & > .layout__region--first {
+      flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+      margin-inline-end: calc(var(--grid-gap) * 0.6666);
+    }
+
+    & > .layout__region--second {
+      flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+      margin-inline-start: calc(var(--grid-gap) * 0.3333);
+    }
+  }
+
+  .layout--twocol-section--25-75 {
+    & > .layout__region--first {
+      flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+      margin-inline-end: calc(var(--grid-gap) * 0.25);
+    }
+
+    & > .layout__region--second {
+      flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+      margin-inline-start: calc(var(--grid-gap) * 0.75);
+    }
+  }
+
+  .layout--twocol-section--75-25 {
+    & > .layout__region--first {
+      flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+      margin-inline-end: calc(var(--grid-gap) * 0.75);
+    }
+
+    & > .layout__region--second {
+      flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+      margin-inline-start: calc(var(--grid-gap) * 0.25);
+    }
+  }
+}

core/themes/olivero/css/layout/layout-content-medium.css

@@ -0,0 +1,55 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Grid system definition for the content wide layout.
+ */
+
+.layout--content-medium,
+.layout--pass--content-medium > * {
+  grid-column: 1 / 7;
+  width: 100%;
+}
+
+@media (min-width: 43.75rem) {
+  .layout--content-medium,
+  .layout--pass--content-medium > * {
+    grid-column: 2 / 14;
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--content-medium,
+  .layout--pass--content-medium > * {
+    grid-column: 3 / 13;
+  }
+}
+
+/*
+  If .layout--content-medium is nested within itself, or an element that's inheriting the
+  layout--content-medium styles from its parent region, go full width within its
+  parent .grid-full.
+*/
+
+@media (min-width: 43.75rem) {
+  .layout--pass--content-medium > * .layout--content-medium,
+  .layout--content-medium .layout--content-medium,
+  .layout--pass--content-medium > * .layout--pass--content-medium > *,
+  .layout--content-medium .layout--pass--content-medium > * {
+    grid-column: 1 / 13;
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--pass--content-medium > * .layout--content-medium,
+  .layout--content-medium .layout--content-medium,
+  .layout--pass--content-medium > * .layout--pass--content-medium > *,
+  .layout--content-medium .layout--pass--content-medium > * {
+    grid-column: 1 / 11;
+  }
+}

core/themes/olivero/css/layout/layout-content-medium.pcss.css

@@ -0,0 +1,39 @@
+/**
+ * @file
+ * Grid system definition for the content wide layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--content-medium,
+.layout--pass--content-medium > * {
+  grid-column: 1 / 7;
+  width: 100%;
+
+  @media (--grid-md) {
+    grid-column: 2 / 14;
+  }
+
+  @media (--lg) {
+    grid-column: 3 / 13;
+  }
+}
+
+/*
+  If .layout--content-medium is nested within itself, or an element that's inheriting the
+  layout--content-medium styles from its parent region, go full width within its
+  parent .grid-full.
+*/
+.layout--pass--content-medium > *,
+.layout--content-medium {
+  & .layout--content-medium,
+  & .layout--pass--content-medium > * {
+    @media (--grid-md) {
+      grid-column: 1 / 13;
+    }
+
+    @media (--lg) {
+      grid-column: 1 / 11;
+    }
+  }
+}

core/themes/olivero/css/layout/layout-content-narrow.css

@@ -0,0 +1,138 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Grid system definition for the content narrow layout.
+ */
+
+.layout--content-narrow,
+.layout--pass--content-narrow > * {
+  grid-column: 1 / 7;
+  width: 100%;
+}
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow,
+  .layout--pass--content-narrow > * {
+    grid-column: 2 / 14;
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--content-narrow,
+  .layout--pass--content-narrow > * {
+    grid-column: 3 / 11;
+  }
+}
+
+/*
+  If .layout--content-narrow is nested within any of the following, allocate the appropriate
+  amount of columns within its parent .grid-full.
+    - .layout--content-narrow class.
+    - Element that's inheriting the layout--content-narrow styles from its parent region.
+    - .layout--content-medium class.
+    - Element that's inheriting the layout--content-medium styles from its parent region.
+*/
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow .layout--content-narrow,
+  .layout--pass--content-narrow > * .layout--content-narrow,
+  .layout--content-medium .layout--content-narrow,
+  .layout--pass--content-medium > * .layout--content-narrow,
+  .layout--content-narrow .layout--pass--content-narrow > *,
+  .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
+  .layout--content-medium .layout--pass--content-narrow > *,
+  .layout--pass--content-medium > * .layout--pass--content-narrow > * {
+    grid-column: 1 / 13;
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--content-narrow .layout--content-narrow,
+  .layout--pass--content-narrow > * .layout--content-narrow,
+  .layout--content-medium .layout--content-narrow,
+  .layout--pass--content-medium > * .layout--content-narrow,
+  .layout--content-narrow .layout--pass--content-narrow > *,
+  .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
+  .layout--content-medium .layout--pass--content-narrow > *,
+  .layout--pass--content-medium > * .layout--pass--content-narrow > * {
+    grid-column: 1 / 9;
+  }
+}
+
+/*
+  Special grid-breaking treatment for text-content elements that
+  reside in a content-narrow layout.
+*/
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow.text-content blockquote::before,
+  .layout--pass--content-narrow > *.text-content blockquote::before,
+  .layout--content-narrow .text-content blockquote::before,
+  .layout--pass--content-narrow > * .text-content blockquote::before {
+    inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow.text-content blockquote::after,
+  .layout--pass--content-narrow > *.text-content blockquote::after,
+  .layout--content-narrow .text-content blockquote::after,
+  .layout--pass--content-narrow > * .text-content blockquote::after {
+    inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+    width: var(--sp);
+    height: calc(100% - 2.8125rem);
+    margin-inline-start: 2px;
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow.text-content blockquote,
+  .layout--pass--content-narrow > *.text-content blockquote,
+  .layout--content-narrow .text-content blockquote,
+  .layout--pass--content-narrow > * .text-content blockquote {
+    width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+    margin-block: var(--sp3);
+    padding-inline-start: 0;
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow.text-content pre,
+  .layout--pass--content-narrow > *.text-content pre,
+  .layout--content-narrow .text-content pre,
+  .layout--pass--content-narrow > * .text-content pre {
+    margin-block: var(--sp3);
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--content-narrow.text-content pre,
+  .layout--pass--content-narrow > *.text-content pre,
+  .layout--content-narrow .text-content pre,
+  .layout--pass--content-narrow > * .text-content pre {
+    width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+    margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+  }
+}
+
+/**
+ * <pre> and <blockquote> elements should not break containers and overflow
+ * into sidebar region when present.
+ */
+
+.sidebar-grid .layout--content-narrow.text-content blockquote,
+.sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,
+.sidebar-grid .layout--content-narrow .text-content blockquote,
+.sidebar-grid .layout--pass--content-narrow > * .text-content blockquote,
+.sidebar-grid .layout--content-narrow.text-content pre,
+.sidebar-grid .layout--pass--content-narrow > *.text-content pre,
+.sidebar-grid .layout--content-narrow .text-content pre,
+.sidebar-grid .layout--pass--content-narrow > * .text-content pre {
+  width: auto;
+}

core/themes/olivero/css/layout/layout-content-narrow.pcss.css

@@ -0,0 +1,105 @@
+/**
+ * @file
+ * Grid system definition for the content narrow layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--content-narrow,
+.layout--pass--content-narrow > * {
+  grid-column: 1 / 7;
+  width: 100%;
+
+  @media (--grid-md) {
+    grid-column: 2 / 14;
+  }
+
+  @media (--lg) {
+    grid-column: 3 / 11;
+  }
+}
+
+/*
+  If .layout--content-narrow is nested within any of the following, allocate the appropriate
+  amount of columns within its parent .grid-full.
+    - .layout--content-narrow class.
+    - Element that's inheriting the layout--content-narrow styles from its parent region.
+    - .layout--content-medium class.
+    - Element that's inheriting the layout--content-medium styles from its parent region.
+*/
+.layout--content-narrow,
+.layout--pass--content-narrow > *,
+.layout--content-medium,
+.layout--pass--content-medium > * {
+  & .layout--content-narrow,
+  & .layout--pass--content-narrow > * {
+    @media (--grid-md) {
+      grid-column: 1 / 13;
+    }
+
+    @media (--lg) {
+      grid-column: 1 / 9;
+    }
+  }
+}
+
+/*
+  Special grid-breaking treatment for text-content elements that
+  reside in a content-narrow layout.
+*/
+.layout--content-narrow,
+.layout--pass--content-narrow > * {
+  &.text-content,
+  & .text-content {
+    & blockquote {
+      &::before {
+        @media (--grid-md) {
+          inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+        }
+      }
+
+      &::after {
+        @media (--grid-md) {
+          inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+          width: var(--sp);
+          height: calc(100% - 45px);
+          margin-inline-start: 2px;
+        }
+      }
+
+      @media (--grid-md) {
+        width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+        margin-block: var(--sp3);
+        padding-inline-start: 0;
+      }
+    }
+
+    & pre {
+      @media (--grid-md) {
+        margin-block: var(--sp3);
+      }
+
+      @media (--lg) {
+        width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+        margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+      }
+    }
+  }
+}
+
+/**
+ * <pre> and <blockquote> elements should not break containers and overflow
+ * into sidebar region when present.
+ */
+.sidebar-grid {
+  & .layout--content-narrow,
+  & .layout--pass--content-narrow > * {
+    &.text-content,
+    & .text-content {
+      & blockquote,
+      & pre {
+        width: auto;
+      }
+    }
+  }
+}

core/themes/olivero/css/layout/layout-discovery-section-layout.css

@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/*
+ * @file
+ * Provides default layout styles for all layout sections.
+ */
+
+.layout {
+  margin-block-end: var(--sp);
+}
+
+@media (min-width: 43.75rem) {
+  .layout {
+    margin-block-end: var(--sp2);
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout {
+    margin-block-end: var(--sp3);
+  }
+}

core/themes/olivero/css/layout/layout-discovery-section-layout.pcss.css

@@ -0,0 +1,18 @@
+/*
+ * @file
+ * Provides default layout styles for all layout sections.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout {
+  margin-block-end: var(--sp);
+
+  @media (--md) {
+    margin-block-end: var(--sp2);
+  }
+
+  @media (--lg) {
+    margin-block-end: var(--sp3);
+  }
+}

core/themes/olivero/css/layout/layout-footer.css

@@ -0,0 +1,57 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Grid system definition for the footer top and footer bottom layouts.
+ */
+
+/**
+ * Creates stacking context ensuring that child elements can never appear in
+ * front of mobile navigation.
+ */
+
+.site-footer {
+  position: relative;
+  z-index: 1;
+}
+
+.site-footer__inner {
+  padding-block: var(--sp2);
+}
+
+@media (min-width: 75rem) {
+  .site-footer__inner {
+    padding-block: var(--sp4) var(--sp13);
+  }
+}
+
+.region--footer_top__inner > *,
+.region--footer_bottom__inner > * {
+  margin-block-end: var(--sp2);
+}
+
+@media (min-width: 43.75rem) {
+  .region--footer_top__inner > *,
+  .region--footer_bottom__inner > * {
+    flex: 1;
+    margin-block-end: 0;
+  }
+
+  .region--footer_top__inner > *:not(:last-child),
+  .region--footer_bottom__inner > *:not(:last-child) {
+    margin-inline-end: var(--sp2);
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .region--footer_top__inner,
+  .region--footer_bottom__inner {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

core/themes/olivero/css/layout/layout-footer.pcss.css

@@ -0,0 +1,44 @@
+/**
+ * @file
+ * Grid system definition for the footer top and footer bottom layouts.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+/**
+ * Creates stacking context ensuring that child elements can never appear in
+ * front of mobile navigation.
+ */
+.site-footer {
+  position: relative;
+  z-index: 1;
+}
+
+.site-footer__inner {
+  padding-block: var(--sp2);
+
+  @media (--nav) {
+    padding-block: var(--sp4) var(--sp13);
+  }
+}
+
+.region--footer_top__inner,
+.region--footer_bottom__inner {
+  & > * {
+    margin-block-end: var(--sp2);
+
+    @media (--md) {
+      flex: 1;
+      margin-block-end: 0;
+
+      &:not(:last-child) {
+        margin-inline-end: var(--sp2);
+      }
+    }
+  }
+
+  @media (--md) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

core/themes/olivero/css/layout/layout-sidebar.css

@@ -0,0 +1,59 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Special grid system for sidebar.
+ */
+
+.sidebar-grid > .site-main {
+  grid-column: 1 / 7;
+  align-self: flex-start;
+}
+
+@media (min-width: 43.75rem) {
+  .sidebar-grid > .site-main {
+    grid-column: 1 / 15;
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .sidebar-grid > .site-main {
+    display: grid;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    grid-column: 3 / 11;
+  }
+
+  .sidebar-grid > .site-main > .region--content-above,
+  .sidebar-grid > .site-main > .region--content {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    grid-column: 1 / 9;
+  }
+
+  .sidebar-grid > .site-main .layout--content-narrow,
+  .sidebar-grid > .site-main .layout--pass--content-narrow > *,
+  .sidebar-grid > .site-main .layout--content-medium,
+  .sidebar-grid > .site-main .layout--pass--content-medium > * {
+    grid-column: 1 / 9;
+  }
+}
+
+.sidebar-grid .region--sidebar {
+  grid-column: 1 / 7;
+}
+
+@media (min-width: 43.75rem) {
+  .sidebar-grid .region--sidebar {
+    grid-column: 3 / 13;
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .sidebar-grid .region--sidebar {
+    grid-column: 12 / 15;
+  }
+}

core/themes/olivero/css/layout/layout-sidebar.pcss.css

@@ -0,0 +1,48 @@
+/**
+ * @file
+ * Special grid system for sidebar.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.sidebar-grid {
+  & > .site-main {
+    grid-column: 1 / 7;
+    align-self: flex-start;
+
+    @media (--grid-md) {
+      grid-column: 1 / 15;
+    }
+
+    @media (--lg) {
+      display: grid;
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+      grid-column: 3 / 11;
+
+      & > .region--content-above,
+      & > .region--content {
+        grid-template-columns: repeat(8, minmax(0, 1fr));
+        grid-column: 1 / 9;
+      }
+
+      & .layout--content-narrow,
+      & .layout--pass--content-narrow > *,
+      & .layout--content-medium,
+      & .layout--pass--content-medium > * {
+        grid-column: 1 / 9;
+      }
+    }
+  }
+
+  & .region--sidebar {
+    grid-column: 1 / 7;
+
+    @media (--grid-md) {
+      grid-column: 3 / 13;
+    }
+
+    @media (--lg) {
+      grid-column: 12 / 15;
+    }
+  }
+}

core/themes/olivero/css/layout/layout-views-grid.css

@@ -0,0 +1,47 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Responsive styles for views grid horizontal layout.
+ *
+ * This creates the correct count of columns and automatically resizes the
+ * grid-items to fit into it. The grid-items will flow onto the next row when
+ * they reach the --views-grid-item--min-width value.
+ */
+
+.views-view-grid {
+  --views-grid--layout-gap: var(--sp);
+  --views-grid--column-count: 4; /* Will be overridden by an inline style. */
+  --views-grid-item--min-width: 6.25rem;
+}
+
+.views-view-grid--horizontal {
+  /**
+   * Calculated values.
+   */
+  --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
+  --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
+  --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
+  grid-gap: var(--views-grid--layout-gap);
+}
+
+.views-view-grid--vertical {
+  margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
+  column-width: var(--views-grid-item--min-width);
+  column-count: var(--views-grid--column-count);
+  column-gap: var(--views-grid--layout-gap);
+}
+
+.views-view-grid--vertical .views-view-grid__item > * {
+  padding-block-end: var(--views-grid--layout-gap);
+  page-break-inside: avoid;
+  break-inside: avoid;
+}

core/themes/olivero/css/layout/layout-views-grid.pcss.css

@@ -0,0 +1,43 @@
+/**
+ * @file
+ * Responsive styles for views grid horizontal layout.
+ *
+ * This creates the correct count of columns and automatically resizes the
+ * grid-items to fit into it. The grid-items will flow onto the next row when
+ * they reach the --views-grid-item--min-width value.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.views-view-grid {
+  --views-grid--layout-gap: var(--sp);
+  --views-grid--column-count: 4; /* Will be overridden by an inline style. */
+  --views-grid-item--min-width: 100px;
+}
+
+.views-view-grid--horizontal {
+  /**
+   * Calculated values.
+   */
+  --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
+  --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
+  --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
+  grid-gap: var(--views-grid--layout-gap);
+}
+
+.views-view-grid--vertical {
+  margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
+  column-width: var(--views-grid-item--min-width);
+  column-count: var(--views-grid--column-count);
+  column-gap: var(--views-grid--layout-gap);
+
+  & .views-view-grid__item {
+    & > * {
+      padding-block-end: var(--views-grid--layout-gap);
+      break-inside: avoid;
+    }
+  }
+}

core/themes/olivero/css/layout/layout.css

@@ -0,0 +1,76 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Base Layout.
+ */
+
+.container {
+  width: 100%;
+  max-width: var(--max-width);
+  padding-inline: var(--container-padding);
+
+  /* This fixes an issue where if the toolbar is open in vertical mode, and
+   * the mobile navigation is open, the "close" button gets pushed outside of
+   * the viewport. */
+}
+
+body.is-fixed .container {
+  width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
+}
+
+.page-wrapper {
+  max-width: var(--max-bg-color);
+  background: var(--color--white);
+}
+
+/**
+ * Creates stacking context ensuring that child elements can never appear in
+ * front of mobile navigation.
+ */
+
+.layout-main-wrapper {
+  position: relative;
+  z-index: 2; /* Ensure dropdown is not cut off by footer. */
+}
+
+/* Contains the social sidebar, and the primary content area. */
+
+@media (min-width: 75rem) {
+  .layout-main {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+  }
+}
+
+@media (min-width: 75rem) {
+  .main-content {
+    width: calc(100% - var(--content-left));
+    margin-inline-end: auto;
+  }
+}
+
+.main-content__container {
+  padding-block-start: var(--sp3);
+}
+
+@media (min-width: 43.75rem) {
+  .main-content__container {
+    padding-block-start: var(--sp5);
+  }
+}
+
+/*
+ * Contextual link wrappers load without the ".contextual" CSS class, which
+ * causes layout shifts. We fix this by setting this to position: absolute;
+ */
+
+[data-contextual-id]:not(.contextual) {
+  position: absolute;
+}

core/themes/olivero/css/layout/layout.pcss.css

@@ -0,0 +1,65 @@
+/**
+ * @file
+ * Base Layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.container {
+  width: 100%;
+  max-width: var(--max-width);
+  padding-inline: var(--container-padding);
+
+  /* This fixes an issue where if the toolbar is open in vertical mode, and
+   * the mobile navigation is open, the "close" button gets pushed outside of
+   * the viewport. */
+  @nest body.is-fixed & {
+    width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
+  }
+}
+
+.page-wrapper {
+  max-width: var(--max-bg-color);
+  background: var(--color--white);
+}
+
+/**
+ * Creates stacking context ensuring that child elements can never appear in
+ * front of mobile navigation.
+ */
+.layout-main-wrapper {
+  position: relative;
+  z-index: 2; /* Ensure dropdown is not cut off by footer. */
+}
+
+/* Contains the social sidebar, and the primary content area. */
+.layout-main {
+  @media (--nav) {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+  }
+}
+
+.main-content {
+  @media (--nav) {
+    width: calc(100% - var(--content-left));
+    margin-inline-end: auto;
+  }
+}
+
+.main-content__container {
+  padding-block-start: var(--sp3);
+
+  @media (--md) {
+    padding-block-start: var(--sp5);
+  }
+}
+
+/*
+ * Contextual link wrappers load without the ".contextual" CSS class, which
+ * causes layout shifts. We fix this by setting this to position: absolute;
+ */
+[data-contextual-id]:not(.contextual) {
+  position: absolute;
+}

core/themes/olivero/css/layout/region-content-below.css

@@ -0,0 +1,46 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Content below region layout.
+ */
+
+@media (min-width: 43.75rem) {
+  .region--content-below {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .region--content-below > * {
+    flex-basis: calc(50% - (var(--grid-gap) / 2));
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-inline-end: var(--grid-gap);
+  }
+
+  .region--content-below > *:nth-child(2n),
+  .region--content-below > *:last-child {
+    margin-inline-end: 0;
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .region--content-below > * {
+    flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+  }
+
+  .region--content-below > *:nth-child(2n),
+  .region--content-below > *:last-child {
+    margin-inline-end: var(--grid-gap);
+  }
+
+  .region--content-below > *:nth-child(3n),
+  .region--content-below > *:last-child {
+    margin-inline-end: 0;
+  }
+}

core/themes/olivero/css/layout/region-content-below.pcss.css

@@ -0,0 +1,41 @@
+/**
+ * @file
+ * Content below region layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region--content-below {
+  @media (--md) {
+    display: flex;
+    flex-wrap: wrap;
+
+    & > * {
+      flex-basis: calc(50% - (var(--grid-gap) / 2));
+      flex-grow: 1;
+      flex-shrink: 0;
+      margin-inline-end: var(--grid-gap);
+
+      &:nth-child(2n),
+      &:last-child {
+        margin-inline-end: 0;
+      }
+    }
+  }
+
+  @media (--md) {
+    & > * {
+      flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+
+      &:nth-child(2n),
+      &:last-child {
+        margin-inline-end: var(--grid-gap);
+      }
+
+      &:nth-child(3n),
+      &:last-child {
+        margin-inline-end: 0;
+      }
+    }
+  }
+}

core/themes/olivero/css/layout/region-content.css

@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Content region layout.
+ */
+
+.region--content {
+  margin-block-end: var(--sp);
+}
+
+@media (min-width: 43.75rem) {
+  .region--content {
+    margin-block-end: var(--sp2);
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .region--content {
+    margin-block-end: var(--sp3);
+  }
+}

core/themes/olivero/css/layout/region-content.pcss.css

@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Content region layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region--content {
+  margin-block-end: var(--sp);
+
+  @media (--md) {
+    margin-block-end: var(--sp2);
+  }
+
+  @media (--lg) {
+    margin-block-end: var(--sp3);
+  }
+}

core/themes/olivero/css/layout/region-hero.css

@@ -0,0 +1,20 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Region default layout.
+ */
+
+.region--hero > *:last-child {
+  margin-block-end: 0;
+}
+
+.region--hero .wide-content {
+  max-width: 100%;
+  margin-inline: 0;
+}

core/themes/olivero/css/layout/region-hero.pcss.css

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Region default layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region--hero {
+  & > *:last-child {
+    margin-block-end: 0;
+  }
+
+  .wide-content {
+    max-width: 100%;
+    margin-inline: 0;
+  }
+}

core/themes/olivero/css/layout/region-secondary-menu.css

@@ -0,0 +1,33 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Secondary menu region layout styling.
+ */
+
+.region--secondary-menu {
+  display: flex;
+  margin-block-start: var(--sp2);
+  margin-block-end: var(--sp2);
+}
+
+.region--secondary-menu > * {
+  margin-block-end: 0;
+}
+
+@media (min-width: 75rem) {
+  body:not(.is-always-mobile-nav) .region--secondary-menu {
+    justify-content: flex-end;
+    margin: 0;
+
+    /* If the secondary nav is the first item within the header, it does not need left separator. */
+  }
+  body:not(.is-always-mobile-nav) .region--secondary-menu:first-child .secondary-nav::before {
+    content: none;
+  }
+}

core/themes/olivero/css/layout/region-secondary-menu.pcss.css

@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Secondary menu region layout styling.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region--secondary-menu {
+  display: flex;
+  margin-block-start: var(--sp2);
+  margin-block-end: var(--sp2);
+
+  & > * {
+    margin-block-end: 0;
+  }
+}
+
+body:not(.is-always-mobile-nav) {
+  @media (--nav) {
+    & .region--secondary-menu {
+      justify-content: flex-end;
+      margin: 0;
+
+      /* If the secondary nav is the first item within the header, it does not need left separator. */
+      &:first-child .secondary-nav::before {
+        content: none;
+      }
+    }
+  }
+}

core/themes/olivero/css/layout/region.css

@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Region default layout.
+ */
+
+.region > *:where(:not([data-big-pipe-placeholder-id])) {
+  margin-block-end: var(--sp);
+}
+
+@media (min-width: 43.75rem) {
+  .region > *:where(:not([data-big-pipe-placeholder-id])) {
+    margin-block-end: var(--sp2);
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .region > *:where(:not([data-big-pipe-placeholder-id])) {
+    margin-block-end: var(--sp3);
+  }
+}

core/themes/olivero/css/layout/region.pcss.css

@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Region default layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region > *:where(:not([data-big-pipe-placeholder-id])) {
+  margin-block-end: var(--sp);
+
+  @media (--md) {
+    margin-block-end: var(--sp2);
+  }
+
+  @media (--lg) {
+    margin-block-end: var(--sp3);
+  }
+}

core/themes/olivero/css/layout/social-bar.css

@@ -0,0 +1,114 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Social Bar Region
+ .
+ */
+
+@media (min-width: 75rem) {
+  .social-bar {
+    flex-shrink: 0;
+    width: var(--content-left);
+    background-color: var(--color--gray-100);
+  }
+}
+
+.social-bar__inner {
+  position: relative;
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+}
+
+@media (min-width: 75rem) {
+  .social-bar__inner {
+    position: relative;
+    width: var(--content-left);
+    padding-block: var(--sp5);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  .social-bar__inner.is-fixed {
+    position: fixed;
+    inset-block-start: var(--sp6);
+    inset-inline-start: 0;
+    height: calc(100vh - var(--sp6));
+  }
+}
+
+.rotate > * {
+  margin-block-end: var(--sp2);
+}
+
+@media (min-width: 75rem) {
+  .rotate > * {
+    display: flex;
+    align-items: center;
+    margin-block-end: 0;
+  }
+
+  .rotate > *:not(:first-child) {
+    margin-inline-end: var(--sp2);
+  }
+}
+
+@media (min-width: 75rem) {
+  .rotate .contextual {
+    inset-inline: 100% auto;
+    transform: rotate(90deg); /* LTR */
+    transform-origin: top left; /* LTR */
+  }
+
+  .rotate .contextual .trigger {
+    float: left; /* LTR */
+
+    /**
+         * Chromium and Webkit do not yet support flow relative logical properties,
+         * such as float: inline-end. However, PostCSS Logical does not compile this
+         * value, so we accommodate by not using these.
+         *
+         * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+         * @see https://github.com/csstools/postcss-plugins/issues/632
+         */
+  }
+  [dir="rtl"] .rotate .contextual .trigger {
+    float: right;
+  }
+}
+
+@media (min-width: 75rem) {
+  .rotate {
+    position: absolute;
+    inset-inline-start: 50%;
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100vh;
+    transform: rotate(-90deg) translateX(-100%); /* LTR */
+    transform-origin: left; /* LTR */
+  }
+
+  @supports (width: max-content) {
+    .rotate {
+      width: max-content;
+    }
+  }
+}
+
+@media (min-width: 75rem) {
+  [dir="rtl"] .rotate {
+    transform: rotate(90deg) translateX(100%);
+    transform-origin: right;
+  }
+
+  [dir="rtl"] .rotate .contextual {
+    transform: rotate(-90deg);
+    transform-origin: top right;
+  }
+}

core/themes/olivero/css/layout/social-bar.pcss.css

@@ -0,0 +1,105 @@
+/**
+ * @file
+ * Social Bar Region
+ .
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.social-bar {
+  @media (--nav) {
+    flex-shrink: 0;
+    width: var(--content-left);
+    background-color: var(--color--gray-100);
+  }
+}
+
+.social-bar__inner {
+  position: relative;
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+
+  @media (--nav) {
+    position: relative;
+    width: var(--content-left);
+    padding-block: var(--sp5);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+
+    &.is-fixed {
+      position: fixed;
+      inset-block-start: var(--sp6);
+      inset-inline-start: 0;
+      height: calc(100vh - var(--sp6));
+    }
+  }
+}
+
+.rotate {
+  & > * {
+    margin-block-end: var(--sp2);
+
+    @media (--nav) {
+      display: flex;
+      align-items: center;
+      margin-block-end: 0;
+
+      &:not(:first-child) {
+        margin-inline-end: var(--sp2);
+      }
+    }
+  }
+
+  & .contextual {
+    @media (--nav) {
+      inset-inline: 100% auto;
+      transform: rotate(90deg); /* LTR */
+      transform-origin: top left; /* LTR */
+
+      & .trigger {
+        float: left; /* LTR */
+
+        /**
+         * Chromium and Webkit do not yet support flow relative logical properties,
+         * such as float: inline-end. However, PostCSS Logical does not compile this
+         * value, so we accommodate by not using these.
+         *
+         * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+         * @see https://github.com/csstools/postcss-plugins/issues/632
+         */
+        &:dir(rtl) {
+          float: right;
+        }
+      }
+    }
+  }
+
+  @media (--nav) {
+    position: absolute;
+    inset-inline-start: 50%;
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100vh;
+    transform: rotate(-90deg) translateX(-100%); /* LTR */
+    transform-origin: left; /* LTR */
+
+    @supports (width: max-content) {
+      width: max-content;
+    }
+  }
+}
+
+[dir="rtl"] {
+  @media (--nav) {
+    & .rotate {
+      transform: rotate(90deg) translateX(100%);
+      transform-origin: right;
+
+      & .contextual {
+        transform: rotate(-90deg);
+        transform-origin: top right;
+      }
+    }
+  }
+}

core/themes/olivero/css/layout/views.css

@@ -0,0 +1,25 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for views.
+ */
+
+.view,
+.view-content {
+  display: grid;
+  gap: var(--sp2);
+  grid-template-rows: max-content;
+}
+
+@media (min-width: 43.75rem) {
+  .view,
+  .view-content {
+    gap: var(--sp3);
+  }
+}

core/themes/olivero/css/layout/views.pcss.css

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Styles for views.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.view,
+.view-content {
+  display: grid;
+  gap: var(--sp2);
+  grid-template-rows: max-content;
+
+  @media (--md) {
+    gap: var(--sp3);
+  }
+}