/* ==================================================================
  CSS Boilerplate v2.0.2
  The Unlicense <https://unlicense.org>
  https://github.com/MattMcAdams/CSS-Boilerplate
================================================================== */
/* =================================================================
/* SECTION Reset
** http://meyerweb.com/eric/tools/css/reset/
** v2.0 | 20110126 * License: none (public domain)
** Modified by Matt McAdams
================================================================= */

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
hr {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* END !SECTION Reset */
/* =================================================================
/* SECTION Core
================================================================= */

/* Links that point to a location on the same page will scroll
 * smoothly down to that location. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Hide content visually, but allow screen readers to read the
 * content. Note that for Accessibility guidelines, this content
 * must become visible if toggled over using a keyboard. */

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Give the hidden attribute most priority - fixes issue where
 * an html element can be marked as hidden but is still visible.
 * Use aria-hidden="true" to hide visual elements from
 * screen readers. */

[hidden] {
  display: none !important;
}

/* Ensures disabled elements do not accept events */

[disabled] {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Use primary color for focus styles */

:focus-visible {
  outline-color: var(--color_accent);
  outline-offset: 3px;
  outline-width: 2px;
}

/* Adds a margin above an element when it is the target of an ID link */

* {
  scroll-margin-top: var(--space_flow);
  scroll-margin-bottom: var(--space_flow);
}

/* ::selection {
  background-color: var(--color-primary-100);
} */

/* ==============================
/* SECTION Typography
============================== */

/* Set the document's default font, color, size, and line height */

body {
  font-family: var(--font_body);
  font-size: var(--font_size--normal);
  line-height: var(--font_height--normal);
  color: var(--color_text--default);
  background: var(--color_background--surface);
  accent-color: var(--color_accent);
}

/* Heading typography */

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font_head);
  font-weight: var(--font_weight--bold);
}

h1,
.util_txt--h1 {
  font-size: var(--font_size--xxxlarge);
  line-height: var(--font_height--xxxlarge);
}

h2,
.util_txt--h2 {
  font-size: var(--font_size--xxlarge);
  line-height: var(--font_height--xxlarge);
}

h3,
.util_txt--h3 {
  font-size: var(--font_size--xlarge);
  line-height: var(--font_height--xlarge);
}

h4,
.util_txt--h4 {
  font-size: var(--font_size--large);
  line-height: var(--font_height--large);
}

h5 {
  font-size: var(--font_size--medium);
  line-height: var(--font_height--medium);
}

/* Set typography for small text */

small,
.util_txt--small {
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
}

/* Basic styles for inline semantics */

strong,
b {
  font-weight: bold;
}

em,
cite,
i,
q {
  font-style: italic;
}

s {
  text-decoration: line-through;
}

u {
  text-decoration: underline;
  font-style: normal;
}

/* Basic style for subscript and superscript text */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

del {
  background: var(--color_background--element);
  text-decoration: line-through;
  padding: 0.1em 0.3em;
}

ins {
  background: var(--color_background--element);
  text-decoration: underline;
  padding: 0.1em 0.3em;
}

/* Mark styles - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark */

mark {
  background: var(--color_text--accent);
  color: var(--color_background--surface);
  padding: 0.1em 0.3em;
}

/* Basic styles for abbreviation. Only style differently when
 * a title is present. */

abbr {
  text-decoration: none;
}

abbr[title] {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
}


/* !SECTION Typography */
/* ==============================
/* SECTION Links
** :not([class]) is so that the styles won't need to be overridden
** in special use cases like navigation / buttons
============================== */

a:not([class]) {
  color: var(--color_text--link);
  text-decoration: none;
  font-weight: bold;
}

/* a:not([class]):visited { } */

a:not([class]):hover,
a:not([class]):focus {
  text-decoration: underline;
  text-decoration-color: var(--color_text--link-alt);
  text-decoration-thickness: 2px;
}

/* OPTIONAL STYLES - Add an icon for special links */

/* a:not([class])[target="_blank"]::after,
a:not([class])[data-link-type="external"] {
  content: '';
  padding-inline-start: 0.1em;
} */

/* a:not([class])[href$='.pdf']::after,
a:not([class])[data-link-type='document']::after {
  content: '';
  padding-inline-start: 0.1em;
} */

/* a:not([class])[href^="tel:"]::before,
a:not([class])[data-link-type="telephone"]::before {
  content: '';
  padding-inline-end: 0.1em;
} */

/* a:not([class])[href^="mailto:"]::before,
a:not([class])[data-link-type="email"]::before {
  content: '';
  padding-inline-end: 0.1em;
} */

/* !SECTION Links */
/* ==============================
/* SECTION Blockquote
============================== */

blockquote {
  border-left: 5px solid var(--color_accent);
  padding: var(--space_2) var(--space_4);
  font-weight: var(--font_weight--semibold);
}

blockquote footer,
blockquote cite {
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
  font-weight: var(--font_weight--normal);
}

blockquote cite {
  font-style: italic;
}

blockquote>cite,
blockquote>footer {
  display: block;
  margin-block-start: calc(var(--space_flow) / 2);
}

/* !SECTION Blockquote */
/* ==============================
/* SECTION Lists
** :not([class]) is so that the styles won't need to be overridden
** in special use cases. For example, when list markup might need
** to be paired with a grid layout
============================== */

/* Set nested unordered list styles */

ul:not([class]) {
  list-style-type: disc;
}

ul:not([class]) ul:not([class]) {
  list-style-type: circle;
}

ul:not([class]) ul:not([class]) ul:not([class]) {
  list-style-type: square;
}

/* Set nested ordered list styles */

ol:not([class]) {
  list-style-type: decimal;
}

ol:not([class]) ol:not([class]) {
  list-style-type: upper-alpha;
}

ol:not([class]) ol:not([class]) ol:not([class]) {
  list-style-type: lower-roman;
}

/* Set indention and flow spacing for lists */

ol:not([class]) li,
ul:not([class]) li {
  margin-block-end: var(--space_1);
  margin-inline-start: var(--space_4);
}

/* Add basic styles for definition lists */

dt {
  font-weight: bold;
}

dd {
  padding-inline-start: var(--space_2);
}

/* !SECTION Lists */
/* ==============================
/* SECTION Media
============================== */

/* Allow media to sit correctly in content flow */

img,
figure,
video,
.aspect-ratio,
.embed-wrapper {
  display: block;
  width: 100%;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Add placeholder background for video */

video:not(:has(source)) {
  background: var(--color_background--element);
}

/* Basic style for figcaption */

figcaption {
  display: block;
  font-style: italic;
}

/* Allow audio to sit correctly in content flow,
 * Adjust border radius to allow consistency across browsers */

audio {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 900px;
}

/* Setup media wrappers */

.aspect-ratio,
.embed-wrapper {
  --aspect-ratio: 16/9;
  width: 100%;
  padding-block-start: calc(100%/(var(--aspect-ratio)));
  position: relative;
}

/* Position inner elements in media wrappers */

.embed-wrapper>iframe,
.embed-wrapper>embed,
.embed-wrapper>object,
.aspect-ratio>iframe,
.aspect-ratio>embed,
.aspect-ratio>object,
.aspect-ratio>img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

/* Allow img to crop to avoid being stretched */

.aspect-ratio>img {
  object-fit: cover;
}

/* Wrapper to allow horizontal overflow,
 * Useful for tables and other wide content */

.overflow-x,
.table-wrapper {
  overflow-x: auto;
}

/* !SECTION Media */
/* ==============================
/* SECTION Rules
============================== */

hr {
  border: none;
  border-block-end: 1px solid var(--color_text--subtle);
  width: 100%;
}

hr.spacer {
  --spacer-height: calc(var(--space_flow) * 2);
  border: none;
  margin-block-start: var(--spacer-height) 0;
}

/* !SECTION Rules*/
/* ==============================
/* SECTION Tables
============================== */

table {
  width: 100%;
}

caption {
  font-size: inherit;
  line-height: inherit;
  text-align: start;
  margin-block-end: var(--space_2);
}

thead {
  background-color: var(--color_text--default);
  color: var(--color_background--surface);
}

th,
td {
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
  padding: var(--space_2);
  text-align: start;
}

th {
  font-weight: bold;
}

tr {
  border-block-end: 0.5px solid var(--color_text--subtle);
}

tbody tr:hover {
  background-color: var(--color_background--element);
}

tfoot {
  background-color: var(--color_background--chip);
}

/* !SECTION Tables */
/* ==============================
/* SECTION Code
============================== */

code,
samp,
kbd,
var {
  font-family: var(--font_mono);
  padding: 0.1em 0.3em;
}

code,
samp {
  background-color: var(--color_background--element);
}

var {
  font-style: italic;
  font-weight: bold;
}

kbd {
  background-color: var(--color_text--default);
  color: var(--color_background--surface);
  border-radius: 5px;
}

pre code,
pre samp {
  display: block;
  padding: var(--space_2);
  overflow: auto;
  font-family: var(--font_mono);
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
}

/* !SECTION Code */
/* ==============================
/* SECTION Details
============================== */

/* Display:block removes Firefox's marker
 * ::webkit-details-marker removed Chrome & Safair's marker */

details {
  display: block;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

summary {
  display: block;
  cursor: pointer;
  color: var(--color_text--default);
  font-weight: var(--font_weight--bold);
  font-weight: bold;
}

summary::before {
  content: "+";
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  font-size: 1em;
  width: 1em;
  margin-inline-end: 0.5em;
  will-change: transform;
  transition: transform 300ms ease;
}

summary:focus::before {
  color: var(--color_accent);
}

summary+* {
  margin-block-start: calc(var(--space_flow) / 2);
}

details[open]>summary::before {
  transform: rotate(45deg);
}

details {
  background: var(--color_background--element);
  padding: var(--space_2);
}

/* !SECTION Details */
/* ==============================
/* SECTION Meter
============================== */

meter {
  --meter-color_track: var(--color_background--element);
  --meter-color_optimum: #15803d;
  --meter-color_sub-optimum: #f59e0b;
  --meter-color_sub-sub-optimum: #dc2626;

  display: block;
  width: 100%;
  height: 1rem;

  -webkit-appearance: none;
  border-radius: 0;
  background: none;
  background-color: var(--meter-color_track);
}

/* Set the track color for webkit browsers */

meter::-webkit-meter-bar {
  background: var(--meter-color_track);
}

/* Set the optimum color */

meter::-webkit-meter-optimum-value {
  background: var(--meter-color_optimum);
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--meter-color_optimum);
}

/* Set the sub optimum color */

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--meter-color_sub-optimum);
}

meter::-webkit-meter-suboptimum-value {
  background: var(--meter-color_sub-optimum);
}

/* Set the sub sub optimum color */

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--meter-color_sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
  background: var(--meter-color_sub-sub-optimum);
}

/* !SECTION Meter */
/* ==============================
/* SECTION Progress
============================== */

progress[value] {
  --progress-color_track: var(--color_background--element);
  --progress-color_fill: var(--color_accent);

  display: block;
  width: 100%;
  height: 0.25rem;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;

  background: var(--progress-color_track);
}

progress[value]::-webkit-progress-bar {
  background: var(--progress-color_track);
}

progress[value]::-webkit-progress-value {
  background: var(--progress-color_fill);
}

progress[value]::-moz-progress-bar {
  background: var(--progress-color_fill);
}

/* !SECTION Progress */
/* !SECTION Core */
/* =================================================================
/* SECTION Forms
** File uploads are not styled, you're better off implementing
** something with JS.
** Date & Color inputs are not styled, they're far too complicated
** for the scope of this project.
================================================================= */

/* Setup form specific styles and variables  */

form {
  --form_invalid-color: #dc2626;
}

/* Add required input notice if required fields exist */

form:has(.form-field input[required])::after {
  content: "* indicates a required field";
  color: var(--form_invalid-color);
  margin-block-start: var(--space_flow);
  display: block;
}

/* Standardize labels */

label,
legend {
  background-color: transparent;
  font: inherit;
}

/* Standard styles for normal inputs */

input:not([type="checkbox"], [type="radio"], [type="color"]),
select,
textarea,
button {
  font: inherit;
  padding: var(--space_1);
  display: block;
  width: 100%;
  border: 1px solid var(--color_text--subtle);
  line-height: inherit;
  box-sizing: border-box;
  background: transparent;
}

/* Remove border and padding for file inputs */

input[type="file"] {
  padding: var(--space_1) 0;
  border: none;
}

/* Set textarea default height and restrict resize to vertical */

textarea {
  resize: vertical;
  min-height: 10rem;
  font-family: var(--font_mono);
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
}

/* ==============================
/* SECTION Form field class
============================== */

.form-field label {
  display: block;
}

/* Add required marker to labels if their input is required */

.form-field:has(input[required]) label::after {
  content: " *";
  color: var(--form_invalid-color);
}

/* !SECTION Form field class */
/* ==============================
/* SECTION Radio & Checkbox
============================== */

ul:has(input[type="checkbox"]),
ul:has(input[type="radio"]),
ol:has(input[type="checkbox"]),
ol:has(input[type="radio"]) {
  list-style: none;
}

ul:has(input[type="checkbox"]) li,
ul:has(input[type="radio"]) li,
ol:has(input[type="checkbox"]) li,
ol:has(input[type="radio"]) li {
  margin: 0;
}

/* !SECTION Radio & Checkbox */
/* ==============================
/* SECTION Range
============================== */

input[type="range"],
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  font-size: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
}

/* Track Styles */
input[type="range"]::-webkit-slider-runnable-track {
  border: none;
  height: 5px;
  border-radius: 0;
  background-color: var(--color_background--element);
}

input[type="range"]::-moz-range-track {
  height: 5px;
  border: none;
  border-radius: 0;
  background-color: var(--color_background--element);
}

input[type="range"]::-moz-range-progress {
  background-color: var(--color_accent);
  height: 5px;
}

/* Thumb Styles */
input[type="range"]::-webkit-slider-thumb {
  margin-block-start: calc((1.2rem / -2) + 2.5px);
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--color_background--surface);
  border-radius: 1000rem;
  background: var(--color_accent);
}

input[type="range"]::-moz-range-thumb {
  border: 2px solid var(--color_background--surface);
  border-radius: 1000rem;
  font-size: 1.2rem;
  background: var(--color_accent);
}

/* !SECTION Range */
/* ==============================
/* SECTION Buttons
============================== */

.button,
.button--secondary,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  width: auto;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--color_text--link);
  cursor: pointer;
  box-sizing: border-box;
  color: var(--color_background--surface);
  border: 2px solid var(--color_text--link);
  padding-inline: var(--space_4);
  padding-block: var(--space_1);
}

a.button:hover,
a.button--secondary:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button:focus,
a.button--secondary:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  border-color: var(--color_text--link-alt);
  background-color: var(--color_text--link-alt);
}

.button--secondary,
button[type="reset"],
input[type="reset"] {
  background-color: var(--color_background--surface);
  color: var(--color_text--link);
  border-color: var(--color_text--link);
}

a.button--secondary:hover,
button[type="reset"]:hover,
input[type="reset"]:hover,
a.button--secondary:focus,
button[type="reset"]:focus,
input[type="reset"]:focus {
  background-color: var(--color_background--surface);
  color: var(--color_text--link-alt);
  border-color: var(--color_text--link-alt);
}

span.button,
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
  cursor: auto;
  background-color: var(--color_background--chip);
  color: var(--color_text--subtle);
  border-color: var(--color_background--chip);
}

span.button--secondary,
input[type="reset"][disabled],
button[type="reset"][disabled] {
  cursor: auto;
  background-color: var(--color_background--surface);
  color: var(--color_background--chip);
  border-color: var(--color_background--chip);
}

/* !SECTION Buttons */
/* !SECTION Forms */
/* =================================================================
/* SECTION Layout
================================================================= */
/* ==============================
/* SECTION Container System
** Containers allow for a robust and flexible layout system by
** applying the gutter padding and max width to the container itself.
** Containers can be nested as needed.
============================== */

/* Setup containers */

.container {
  margin-inline: auto;
  padding-inline: var(--space_gutter);
  max-width: var(--width_content);
}

.container--wide {
  margin-inline: auto;
  padding-inline: var(--space_gutter);
  max-width: var(--width_wide);
}

.container--full {
  margin-inline: auto;
  padding-inline: var(--space_gutter);
}

/* Allow nested containers wider than parent */

.container>.container--wide {
  max-width: var(--width_wide);
  margin-inline: calc(min(calc(100vw - 100%),
        calc(var(--width_wide) - 100%)) / -2);
}

.container>.container--full,
.container--wide>.container--full {
  max-width: 100vw;
  margin-inline: calc((100vw - 100%) / -2);
}

/* Remove duplicate gutters from nested containers the same size as parent */

.container>.container,
.container--wide>.container--wide,
.container--full>.container--full {
  margin-inline: calc(var(--space_gutter) * -1);
}

/* Account for containers smaller than parent */

.container--wide>.container,
.container--full>.container {
  margin-inline: max(calc(var(--space_gutter) * -1),
      calc((100% - var(--width_content)) / 2));
}

.container--full>.container--wide {
  margin-inline: max(calc(var(--space_gutter) * -1),
      calc((100% - var(--width_wide)) / 2));
}

/* !SECTION Containers */
/* ==============================
/* SECTION Flow Spacing
** Flow spacing is the space between elements in a vertical flow.
** The .section class is provided for larger gaps between sections.
** Flow spacing can be applied to a individual container using the .layout--flow class. or to the entire document using the .global--flow class. The implementation is different for each method, so consider how you want the spacing to be applied.
============================== */

.layout--flow>*+*,
blockquote>*+*,
details>*+* {
  margin-block-start: var(--space_flow);
}

.layout--flow-double>*+* {
  margin-block-start: calc(var(--space_flow) * 2);
}

.layout--flow-half>*+* {
  margin-block-start: calc(var(--space_flow) / 2);
}

.layout--flow>*+h1,
.layout--flow>*+h2,
.layout--flow>*+h3,
.layout--flow>*+h4,
.layout--flow>*+h5,
.layout--flow>*+h6 {
  margin-block-start: calc(var(--space_flow) * 2);
}

.layout--flow>h1+h2,
.layout--flow>h2+h3,
.layout--flow>h3+h4,
.layout--flow>h4+h5,
.layout--flow>h5+h6 {
  margin-block-start: calc(var(--space_flow) / 2);
}

.section {
  margin-block-start: var(--space_section);
}

/* !SECTION Flow Spacing */
/* ==============================
/* SECTION Level
** Creates a bar with content vertically aligned on both sides
** Good for split navigation bars etc.
============================== */

.layout--level {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  gap: var(--space_gutter);
}

/* !SECTION Level */
/* ==============================
/* SECTION Grid
** The grid layout creates a responsive grid with a fluid number of columns.
** You can define the number of columns to allow as well as the minimum
** width of each grid item. Just be aware that if you set the minimum width
** too high, the grid may not fit on viewports smaller than the minimum width.
============================== */

.layout--grid {
  --grid-column--count: 6;
  --grid-gap--width: var(--space_grid-gap);
  --grid-gap--count: calc(var(--grid-column--count) - 1);
  --grid-gap--total: calc(var(--grid-gap--width) * var(--grid-gap--count));
  --grid-item--min-width: 14rem;
  --grid-item--max-width: calc((100% - var(--grid-gap--total)) / var(--grid-column--count));

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  gap: var(--grid-gap--width);
}

/* Stabilize height of components that are side by side */

.layout--grid>div> :only-child,
.layout--grid>li> :only-child {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.layout--grid>div> :only-child>*,
.layout--grid>li> :only-child>* {
  flex: 1;
}

/* !SECTION Grid */
/* ==============================
/* SECTION App
** The app wrapper ensures the the site footer sticks to the
** bottom of the viewport on short pages.
** Structure should be as follows:
** <div id="app">
**   <header></header>
**   <main></main>
**   <footer></footer>
** </div>
** No other elements should be present in the app div.
============================== */

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
}

#app> :nth-child(2) {
  width: 100%;
  flex: 1 0 auto;
  place-content: start center;
}

/* !SECTION App */
/* ==============================
/* SECTION Page Layout
** The page layout provides grid areas for a hero, content, and sidebar.
** It arranges the grid areas responsively based on the presence of a sidebar.
** Inside the <main class="page"> tag, the structure should follow:
** <div class="page_header"> (optional, may use header element)
** <div class="page_content"> (may use article element)
** <div class="page_sidebar"> (optional, may use aside or nav elements)
============================== */

.page {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "sidebar";
  grid-template-columns: 1fr;
  column-gap: var(--space_layout-gap);
  max-width: var(--width_wide);
  margin-inline: auto;
}

/* Fix for x overflow elements breaking layout */

.page>* {
  min-width: 0;
}

/* Page areas */

.page__header {
  grid-area: header;
}

.page__content {
  grid-area: content;
  margin-block: var(--space_section);
}

.page__sidebar {
  grid-area: sidebar;
  margin-block-end: var(--space_section);
}

/* Layout fixes */

.page:has(.page__sidebar) .container>.container--wide,
.page:has(.page__sidebar) .container>.container--full,
.page:has(.page__sidebar) .container--wide>.container,
.page:has(.page__sidebar) .container--wide>.container--full,
.page:has(.page__sidebar) .container--full>.container,
.page:has(.page__sidebar) .container--full>.container--wide {
  margin-inline: calc(var(--space_gutter) * -1);
}

.page:not(:has(.page__sidebar)) .width--full,
.page:not(:has(.page__sidebar)) .container--full {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc((100vw - 100%) / -2);
}

/* Enable sidebar */

@media (min-width: 60rem) {
  .page:has(.page__sidebar) {
    grid-template-areas:
      "header header"
      "sidebar content";
    grid-template-columns:
      minmax(calc(25% - (var(--space_layout-gap) / 2)), var(--width_sidebar)) min(calc(75% - (var(--space_layout-gap) / 2)), var(--width_content));
  }

  .page__sidebar {
    margin-block-start: var(--space_section);
  }
}

/* !SECTION Page Layout */
/* !SECTION Layout */