@charset "UTF-8";
/* RIVER Design-System: Helpers - Styles / Titles */
.style-title {
  font-family: var(--type-font-title);
  font-weight: var(--type-weight-bold);
  line-height: 1.2em;
}

.style-title--1, .scope-styles :where(h1) {
  font-size: var(--type-size-title-1);
}

.style-title--2, .scope-styles :where(h2) {
  font-size: var(--type-size-title-2);
  color: var(--colors-primary-normal);
}

.style-title--3, .scope-styles :where(h3) {
  font-size: var(--type-size-title-3);
}

.style-title--4, .scope-styles :where(h4) {
  font-size: var(--type-size-title-4);
}

.style-title--5, .scope-styles :where(h5) {
  font-size: var(--type-size-title-5);
}

.style-title--6, .scope-styles :where(h6) {
  font-size: var(--type-size-title-6);
}

/* RIVER Design-System: Helpers - Styles / Formats */
.style-paragraph, .scope-styles :where(p) {
  margin-bottom: var(--type-spacing-normal);
}

.style-link, .scope-styles :where(a) {
  color: var(--colors-primary-normal);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color;
}

.style-link:hover, .scope-styles :hover:where(a) {
  cursor: pointer;
  color: var(--colors-primary-dark);
}

.style-button, .scope-styles :where(button) {
  display: inline-block;
  padding: var(--sizes-padding-small);
  color: var(--colors-base);
  background-color: var(--colors-primary-normal);
  border: solid 2px var(--colors-gray-border);
  border-color: var(--colors-primary-normal);
  border-radius: 0;
  font-weight: var(--type-weight-bold);
  cursor: pointer;
  text-decoration: none;
}

.style-button:hover, .scope-styles :hover:where(button), .style-button:focus, .scope-styles :focus:where(button) {
  background-color: var(--colors-primary-dark);
  border-color: var(--colors-primary-dark);
}

.style-input, .scope-styles :where(input) {
  display: inline-block;
  padding: var(--sizes-padding-small);
  color: var(--colors-gray-normal);
  background-color: var(--colors-gray-bg);
  border: solid 2px var(--colors-gray-border);
  border-radius: 4px;
}

.style-input:hover, .scope-styles :hover:where(input), .style-input:focus, .scope-styles :focus:where(input) {
  border-color: var(--colors-primary-normal);
}

.style-small, .scope-styles :where(small) {
  font-size: 0.8em;
}

.style-big, .scope-styles :where(big) {
  font-size: 1.2em;
}

.style-strong, .scope-styles :where(strong, b) {
  font-weight: var(--type-weight-bold);
}

.style-emphasis, .scope-styles :where(em) {
  font-style: italic;
}

.style-caption {
  color: var(--colors-gray-light);
  font-size: 0.8em;
  font-weight: var(--type-weight-bold);
  text-transform: uppercase;
}

.style-divide, .scope-styles :where(hr) {
  display: block;
  border: none;
  border-top: solid 2px var(--colors-gray-border);
  margin: var(--sizes-size-large) 0;
}

.style-divide--vertical {
  height: 100%;
  width: 0;
  border-top: none;
  border-left: solid 2px var(--colors-gray-border);
  margin: 0 var(--sizes-size-layout-small);
}

.style-subtitle {
  font-weight: var(--type-weight-bold);
  font-style: italic;
  border-bottom: solid 2px var(--colors-gray-border);
  margin-bottom: var(--sizes-size-normal);
}

.style-blockquote, .scope-styles :where(blockquote) {
  padding: var(--sizes-padding-small);
  border-left: solid 0.5rem var(--colors-gray-normal);
}

.style-blockquote > *:last-child, .scope-styles :where(blockquote) > *:last-child {
  margin-bottom: 0;
}

.style-inlinequote:before, .scope-styles :where(q):before {
  content: "“";
  margin-right: 0.1em;
}

.style-inlinequote:after, .scope-styles :where(q):after {
  content: "”";
  margin-left: 0.1em;
}

.style-quote {
  display: inline-block;
  padding: var(--sizes-padding-small);
  background-color: var(--colors-gray-bg);
}

.style-quote:before {
  content: "“";
  margin-right: 0.25em;
  font-size: 1.2em;
  color: var(--colors-gray-light);
}

.style-quote:after {
  content: "”";
  margin-left: 0.25em;
  font-size: 1.2em;
  color: var(--colors-gray-light);
}

.style-code, .scope-styles :where(code) {
  display: inline-block;
  padding: var(--sizes-size-smallest);
  font-size: 0.8em;
  background-color: var(--colors-gray-bg);
}

.style-codeblock, .scope-styles :where(pre) {
  display: inline-block;
  padding: var(--sizes-padding-small);
  background-color: var(--colors-gray-bg);
}

.style-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.style-overlay--gray {
  background-color: var(--colors-gray-alpha);
}

/* RIVER Design-System: Helpers - Styles / Formats */
.style-list, .scope-styles :where(ol), .scope-styles :where(ul) {
  margin-left: 2em;
}

.style-list--ul {
  list-style: disc;
}

.style-list--ol {
  list-style: decimal;
}

.style-table, .scope-styles :where(table) {
  display: table;
  width: 100%;
}

.style-table th, .scope-styles :where(table) th, td {
  padding: var(--sizes-padding-small);
  border-bottom: solid 2px var(--colors-gray-border);
  border-color: var(--colors-gray-bg);
}

.style-table th, .scope-styles :where(table) th {
  font-weight: var(--type-weight-bold);
  font-size: 1.05em;
}

/* RIVER Design-System: Helpers - Styles / Formats */
.style-image, .scope-styles :where(img) {
  display: block;
  max-width: 100%;
}

:where(.style-image, .scope-styles :where(img)) {
  width: auto;
  height: auto;
}

.style-image--fullwidth {
  width: 100%;
  height: auto;
}

.style-image--cover, .style-image--contain {
  position: absolute;
  inset: 0;
}

.style-image--cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.style-image--contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.style-icon {
  display: inline-block;
  max-width: 100%;
}

.style-icon > svg {
  display: block;
  height: 100%;
  width: auto;
}

:where(.style-icon) {
  width: auto;
  height: auto;
}

.style-icon--small {
  height: 0.8em;
}

.style-icon--normal {
  height: 1em;
}

.style-icon--large {
  height: 1.2em;
}

.style-video,
.style-splash {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 57%;
}
.style-video > iframe, .style-video > img, .style-video > video,
.style-splash > iframe,
.style-splash > img,
.style-splash > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.style-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* RIVER Design-System: Helpers - Styles / Formats */
.style-notification {
  display: block;
  padding: 1rem 2rem;
  border: solid 2px slategray;
}

.style-notification--text {
  color: var(--colors-gray-normal);
  background-color: var(--colors-gray-bg);
  border-color: var(--colors-gray-border);
}

.style-notification--success {
  color: #047857;
  background-color: #a7f3d0;
  border-color: #10b981;
}

.style-notification--success :is(a, h1, h2, h3, h4, h5, h6) {
  color: #047857;
}

.style-notification--info {
  color: #3A61D8;
  background-color: #E1E7FE;
  border-color: #4B72E6;
}

.style-notification--info :is(a, h1, h2, h3, h4, h5, h6) {
  color: #3A61D8;
}

.style-notification--warning {
  color: #c2410c;
  background-color: #fed7aa;
  border-color: #f97316;
}

.style-notification--warning :is(a, h1, h2, h3, h4, h5, h6) {
  color: #c2410c;
}

.style-notification--error {
  color: #be123c;
  background-color: #fecdd3;
  border-color: #f43f5e;
}

.style-notification--error :is(a, h1, h2, h3, h4, h5, h6) {
  color: #be123c;
}

/* RIVER Design-System: Helpers - Styles / Scope */
.scope-styles *:where(h1, h2, h3, h4, h5, h6) {
  margin-bottom: var(--type-spacing-small);
}
.scope-styles p,
.scope-styles button, .scope-styles input, .scope-styles blockquote,
.scope-styles pre,
.scope-styles ul, .scope-styles ol,
.scope-styles table {
  margin-bottom: var(--type-spacing-normal);
}
.scope-styles *:last-child {
  margin-bottom: 0 !important;
}

/* RIVER Design-System: Helpers - Layout / General */
.layout-clear {
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
}

.layout-space {
  display: block;
  clear: both;
  line-height: 0;
  overflow: hidden;
}

/* RIVER Design-System: Helpers - Display / General */
.display-fullscreen {
  width: 100%;
  min-height: 100vh;
}

.display-fullsize {
  width: 100%;
  height: 100%;
}

.display-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.display-bg-cover {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.display-fit {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.display-contain {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}

/* RIVER Design-System: Helpers - Widths */
.width--full {
  width: 100%;
}

.width--20\% {
  width: 20%;
}

.offset--20\% {
  margin-left: 20%;
}

.width--25\% {
  width: 25%;
}

.offset--25\% {
  margin-left: 25%;
}

.width--33\% {
  width: 33%;
}

.offset--33\% {
  margin-left: 33%;
}

.width--40\% {
  width: 40%;
}

.offset--40\% {
  margin-left: 40%;
}

.width--50\% {
  width: 50%;
}

.offset--50\% {
  margin-left: 50%;
}

.width--60\% {
  width: 60%;
}

.offset--60\% {
  margin-left: 60%;
}

.width--66\% {
  width: 66%;
}

.offset--66\% {
  margin-left: 66%;
}

.width--75\% {
  width: 75%;
}

.offset--75\% {
  margin-left: 75%;
}

.width--80\% {
  width: 80%;
}

.offset--80\% {
  margin-left: 80%;
}

.width--100\% {
  width: 100%;
}

.offset--100\% {
  margin-left: 100%;
}

.width--1\/12 {
  width: 8.3333333333%;
}

.offset--1\/12 {
  margin-left: 8.3333333333%;
}

.width--2\/12 {
  width: 16.6666666667%;
}

.offset--2\/12 {
  margin-left: 16.6666666667%;
}

.width--3\/12 {
  width: 25%;
}

.offset--3\/12 {
  margin-left: 25%;
}

.width--4\/12 {
  width: 33.3333333333%;
}

.offset--4\/12 {
  margin-left: 33.3333333333%;
}

.width--5\/12 {
  width: 41.6666666667%;
}

.offset--5\/12 {
  margin-left: 41.6666666667%;
}

.width--6\/12 {
  width: 50%;
}

.offset--6\/12 {
  margin-left: 50%;
}

.width--7\/12 {
  width: 58.3333333333%;
}

.offset--7\/12 {
  margin-left: 58.3333333333%;
}

.width--8\/12 {
  width: 66.6666666667%;
}

.offset--8\/12 {
  margin-left: 66.6666666667%;
}

.width--9\/12 {
  width: 75%;
}

.offset--9\/12 {
  margin-left: 75%;
}

.width--10\/12 {
  width: 83.3333333333%;
}

.offset--10\/12 {
  margin-left: 83.3333333333%;
}

.width--11\/12 {
  width: 91.6666666667%;
}

.offset--11\/12 {
  margin-left: 91.6666666667%;
}

.width--12\/12 {
  width: 100%;
}

.offset--12\/12 {
  margin-left: 100%;
}

@media (min-width: 720px) {
  .sm\:width--full {
    width: 100%;
  }
  .sm\:width--20\% {
    width: 20%;
  }
  .sm\:offset--20\% {
    margin-left: 20%;
  }
  .sm\:width--25\% {
    width: 25%;
  }
  .sm\:offset--25\% {
    margin-left: 25%;
  }
  .sm\:width--33\% {
    width: 33%;
  }
  .sm\:offset--33\% {
    margin-left: 33%;
  }
  .sm\:width--40\% {
    width: 40%;
  }
  .sm\:offset--40\% {
    margin-left: 40%;
  }
  .sm\:width--50\% {
    width: 50%;
  }
  .sm\:offset--50\% {
    margin-left: 50%;
  }
  .sm\:width--60\% {
    width: 60%;
  }
  .sm\:offset--60\% {
    margin-left: 60%;
  }
  .sm\:width--66\% {
    width: 66%;
  }
  .sm\:offset--66\% {
    margin-left: 66%;
  }
  .sm\:width--75\% {
    width: 75%;
  }
  .sm\:offset--75\% {
    margin-left: 75%;
  }
  .sm\:width--80\% {
    width: 80%;
  }
  .sm\:offset--80\% {
    margin-left: 80%;
  }
  .sm\:width--100\% {
    width: 100%;
  }
  .sm\:offset--100\% {
    margin-left: 100%;
  }
  .sm\:width--1\/12 {
    width: 8.3333333333%;
  }
  .sm\:offset--1\/12 {
    margin-left: 8.3333333333%;
  }
  .sm\:width--2\/12 {
    width: 16.6666666667%;
  }
  .sm\:offset--2\/12 {
    margin-left: 16.6666666667%;
  }
  .sm\:width--3\/12 {
    width: 25%;
  }
  .sm\:offset--3\/12 {
    margin-left: 25%;
  }
  .sm\:width--4\/12 {
    width: 33.3333333333%;
  }
  .sm\:offset--4\/12 {
    margin-left: 33.3333333333%;
  }
  .sm\:width--5\/12 {
    width: 41.6666666667%;
  }
  .sm\:offset--5\/12 {
    margin-left: 41.6666666667%;
  }
  .sm\:width--6\/12 {
    width: 50%;
  }
  .sm\:offset--6\/12 {
    margin-left: 50%;
  }
  .sm\:width--7\/12 {
    width: 58.3333333333%;
  }
  .sm\:offset--7\/12 {
    margin-left: 58.3333333333%;
  }
  .sm\:width--8\/12 {
    width: 66.6666666667%;
  }
  .sm\:offset--8\/12 {
    margin-left: 66.6666666667%;
  }
  .sm\:width--9\/12 {
    width: 75%;
  }
  .sm\:offset--9\/12 {
    margin-left: 75%;
  }
  .sm\:width--10\/12 {
    width: 83.3333333333%;
  }
  .sm\:offset--10\/12 {
    margin-left: 83.3333333333%;
  }
  .sm\:width--11\/12 {
    width: 91.6666666667%;
  }
  .sm\:offset--11\/12 {
    margin-left: 91.6666666667%;
  }
  .sm\:width--12\/12 {
    width: 100%;
  }
  .sm\:offset--12\/12 {
    margin-left: 100%;
  }
}
@media (min-width: 1020px) {
  .md\:width--full {
    width: 100%;
  }
  .md\:width--20\% {
    width: 20%;
  }
  .md\:offset--20\% {
    margin-left: 20%;
  }
  .md\:width--25\% {
    width: 25%;
  }
  .md\:offset--25\% {
    margin-left: 25%;
  }
  .md\:width--33\% {
    width: 33%;
  }
  .md\:offset--33\% {
    margin-left: 33%;
  }
  .md\:width--40\% {
    width: 40%;
  }
  .md\:offset--40\% {
    margin-left: 40%;
  }
  .md\:width--50\% {
    width: 50%;
  }
  .md\:offset--50\% {
    margin-left: 50%;
  }
  .md\:width--60\% {
    width: 60%;
  }
  .md\:offset--60\% {
    margin-left: 60%;
  }
  .md\:width--66\% {
    width: 66%;
  }
  .md\:offset--66\% {
    margin-left: 66%;
  }
  .md\:width--75\% {
    width: 75%;
  }
  .md\:offset--75\% {
    margin-left: 75%;
  }
  .md\:width--80\% {
    width: 80%;
  }
  .md\:offset--80\% {
    margin-left: 80%;
  }
  .md\:width--100\% {
    width: 100%;
  }
  .md\:offset--100\% {
    margin-left: 100%;
  }
  .md\:width--1\/12 {
    width: 8.3333333333%;
  }
  .md\:offset--1\/12 {
    margin-left: 8.3333333333%;
  }
  .md\:width--2\/12 {
    width: 16.6666666667%;
  }
  .md\:offset--2\/12 {
    margin-left: 16.6666666667%;
  }
  .md\:width--3\/12 {
    width: 25%;
  }
  .md\:offset--3\/12 {
    margin-left: 25%;
  }
  .md\:width--4\/12 {
    width: 33.3333333333%;
  }
  .md\:offset--4\/12 {
    margin-left: 33.3333333333%;
  }
  .md\:width--5\/12 {
    width: 41.6666666667%;
  }
  .md\:offset--5\/12 {
    margin-left: 41.6666666667%;
  }
  .md\:width--6\/12 {
    width: 50%;
  }
  .md\:offset--6\/12 {
    margin-left: 50%;
  }
  .md\:width--7\/12 {
    width: 58.3333333333%;
  }
  .md\:offset--7\/12 {
    margin-left: 58.3333333333%;
  }
  .md\:width--8\/12 {
    width: 66.6666666667%;
  }
  .md\:offset--8\/12 {
    margin-left: 66.6666666667%;
  }
  .md\:width--9\/12 {
    width: 75%;
  }
  .md\:offset--9\/12 {
    margin-left: 75%;
  }
  .md\:width--10\/12 {
    width: 83.3333333333%;
  }
  .md\:offset--10\/12 {
    margin-left: 83.3333333333%;
  }
  .md\:width--11\/12 {
    width: 91.6666666667%;
  }
  .md\:offset--11\/12 {
    margin-left: 91.6666666667%;
  }
  .md\:width--12\/12 {
    width: 100%;
  }
  .md\:offset--12\/12 {
    margin-left: 100%;
  }
}
@media (min-width: 1280px) {
  .lg\:width--full {
    width: 100%;
  }
  .lg\:width--20\% {
    width: 20%;
  }
  .lg\:offset--20\% {
    margin-left: 20%;
  }
  .lg\:width--25\% {
    width: 25%;
  }
  .lg\:offset--25\% {
    margin-left: 25%;
  }
  .lg\:width--33\% {
    width: 33%;
  }
  .lg\:offset--33\% {
    margin-left: 33%;
  }
  .lg\:width--40\% {
    width: 40%;
  }
  .lg\:offset--40\% {
    margin-left: 40%;
  }
  .lg\:width--50\% {
    width: 50%;
  }
  .lg\:offset--50\% {
    margin-left: 50%;
  }
  .lg\:width--60\% {
    width: 60%;
  }
  .lg\:offset--60\% {
    margin-left: 60%;
  }
  .lg\:width--66\% {
    width: 66%;
  }
  .lg\:offset--66\% {
    margin-left: 66%;
  }
  .lg\:width--75\% {
    width: 75%;
  }
  .lg\:offset--75\% {
    margin-left: 75%;
  }
  .lg\:width--80\% {
    width: 80%;
  }
  .lg\:offset--80\% {
    margin-left: 80%;
  }
  .lg\:width--100\% {
    width: 100%;
  }
  .lg\:offset--100\% {
    margin-left: 100%;
  }
  .lg\:width--1\/12 {
    width: 8.3333333333%;
  }
  .lg\:offset--1\/12 {
    margin-left: 8.3333333333%;
  }
  .lg\:width--2\/12 {
    width: 16.6666666667%;
  }
  .lg\:offset--2\/12 {
    margin-left: 16.6666666667%;
  }
  .lg\:width--3\/12 {
    width: 25%;
  }
  .lg\:offset--3\/12 {
    margin-left: 25%;
  }
  .lg\:width--4\/12 {
    width: 33.3333333333%;
  }
  .lg\:offset--4\/12 {
    margin-left: 33.3333333333%;
  }
  .lg\:width--5\/12 {
    width: 41.6666666667%;
  }
  .lg\:offset--5\/12 {
    margin-left: 41.6666666667%;
  }
  .lg\:width--6\/12 {
    width: 50%;
  }
  .lg\:offset--6\/12 {
    margin-left: 50%;
  }
  .lg\:width--7\/12 {
    width: 58.3333333333%;
  }
  .lg\:offset--7\/12 {
    margin-left: 58.3333333333%;
  }
  .lg\:width--8\/12 {
    width: 66.6666666667%;
  }
  .lg\:offset--8\/12 {
    margin-left: 66.6666666667%;
  }
  .lg\:width--9\/12 {
    width: 75%;
  }
  .lg\:offset--9\/12 {
    margin-left: 75%;
  }
  .lg\:width--10\/12 {
    width: 83.3333333333%;
  }
  .lg\:offset--10\/12 {
    margin-left: 83.3333333333%;
  }
  .lg\:width--11\/12 {
    width: 91.6666666667%;
  }
  .lg\:offset--11\/12 {
    margin-left: 91.6666666667%;
  }
  .lg\:width--12\/12 {
    width: 100%;
  }
  .lg\:offset--12\/12 {
    margin-left: 100%;
  }
}
@media (min-width: 1440px) {
  .xl\:width--full {
    width: 100%;
  }
  .xl\:width--20\% {
    width: 20%;
  }
  .xl\:offset--20\% {
    margin-left: 20%;
  }
  .xl\:width--25\% {
    width: 25%;
  }
  .xl\:offset--25\% {
    margin-left: 25%;
  }
  .xl\:width--33\% {
    width: 33%;
  }
  .xl\:offset--33\% {
    margin-left: 33%;
  }
  .xl\:width--40\% {
    width: 40%;
  }
  .xl\:offset--40\% {
    margin-left: 40%;
  }
  .xl\:width--50\% {
    width: 50%;
  }
  .xl\:offset--50\% {
    margin-left: 50%;
  }
  .xl\:width--60\% {
    width: 60%;
  }
  .xl\:offset--60\% {
    margin-left: 60%;
  }
  .xl\:width--66\% {
    width: 66%;
  }
  .xl\:offset--66\% {
    margin-left: 66%;
  }
  .xl\:width--75\% {
    width: 75%;
  }
  .xl\:offset--75\% {
    margin-left: 75%;
  }
  .xl\:width--80\% {
    width: 80%;
  }
  .xl\:offset--80\% {
    margin-left: 80%;
  }
  .xl\:width--100\% {
    width: 100%;
  }
  .xl\:offset--100\% {
    margin-left: 100%;
  }
  .xl\:width--1\/12 {
    width: 8.3333333333%;
  }
  .xl\:offset--1\/12 {
    margin-left: 8.3333333333%;
  }
  .xl\:width--2\/12 {
    width: 16.6666666667%;
  }
  .xl\:offset--2\/12 {
    margin-left: 16.6666666667%;
  }
  .xl\:width--3\/12 {
    width: 25%;
  }
  .xl\:offset--3\/12 {
    margin-left: 25%;
  }
  .xl\:width--4\/12 {
    width: 33.3333333333%;
  }
  .xl\:offset--4\/12 {
    margin-left: 33.3333333333%;
  }
  .xl\:width--5\/12 {
    width: 41.6666666667%;
  }
  .xl\:offset--5\/12 {
    margin-left: 41.6666666667%;
  }
  .xl\:width--6\/12 {
    width: 50%;
  }
  .xl\:offset--6\/12 {
    margin-left: 50%;
  }
  .xl\:width--7\/12 {
    width: 58.3333333333%;
  }
  .xl\:offset--7\/12 {
    margin-left: 58.3333333333%;
  }
  .xl\:width--8\/12 {
    width: 66.6666666667%;
  }
  .xl\:offset--8\/12 {
    margin-left: 66.6666666667%;
  }
  .xl\:width--9\/12 {
    width: 75%;
  }
  .xl\:offset--9\/12 {
    margin-left: 75%;
  }
  .xl\:width--10\/12 {
    width: 83.3333333333%;
  }
  .xl\:offset--10\/12 {
    margin-left: 83.3333333333%;
  }
  .xl\:width--11\/12 {
    width: 91.6666666667%;
  }
  .xl\:offset--11\/12 {
    margin-left: 91.6666666667%;
  }
  .xl\:width--12\/12 {
    width: 100%;
  }
  .xl\:offset--12\/12 {
    margin-left: 100%;
  }
}
/* RIVER Design-System: Helpers - Grid Cols */
.grid-cols {
  display: grid;
}

.grid-cols--inline {
  display: inline-grid;
}

.grid-cols--1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols--7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols--8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols--9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols--10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols--11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-col--auto {
  grid-column: auto;
}

.grid-col--start-auto {
  grid-column-start: auto;
}

.grid-col--end-auto {
  grid-end-start: auto;
}

.grid-col--full {
  grid-column: 1/-1;
}

.grid-span--1 {
  grid-column: span 1/span 1;
}

.grid-start--1 {
  grid-column-start: 1;
}

.grid-end--1 {
  grid-column-end: 1;
}

.grid-span--2 {
  grid-column: span 2/span 2;
}

.grid-start--2 {
  grid-column-start: 2;
}

.grid-end--2 {
  grid-column-end: 2;
}

.grid-span--3 {
  grid-column: span 3/span 3;
}

.grid-start--3 {
  grid-column-start: 3;
}

.grid-end--3 {
  grid-column-end: 3;
}

.grid-span--4 {
  grid-column: span 4/span 4;
}

.grid-start--4 {
  grid-column-start: 4;
}

.grid-end--4 {
  grid-column-end: 4;
}

.grid-span--5 {
  grid-column: span 5/span 5;
}

.grid-start--5 {
  grid-column-start: 5;
}

.grid-end--5 {
  grid-column-end: 5;
}

.grid-span--6 {
  grid-column: span 6/span 6;
}

.grid-start--6 {
  grid-column-start: 6;
}

.grid-end--6 {
  grid-column-end: 6;
}

.grid-span--7 {
  grid-column: span 7/span 7;
}

.grid-start--7 {
  grid-column-start: 7;
}

.grid-end--7 {
  grid-column-end: 7;
}

.grid-span--8 {
  grid-column: span 8/span 8;
}

.grid-start--8 {
  grid-column-start: 8;
}

.grid-end--8 {
  grid-column-end: 8;
}

.grid-span--9 {
  grid-column: span 9/span 9;
}

.grid-start--9 {
  grid-column-start: 9;
}

.grid-end--9 {
  grid-column-end: 9;
}

.grid-span--10 {
  grid-column: span 10/span 10;
}

.grid-start--10 {
  grid-column-start: 10;
}

.grid-end--10 {
  grid-column-end: 10;
}

.grid-span--11 {
  grid-column: span 11/span 11;
}

.grid-start--11 {
  grid-column-start: 11;
}

.grid-end--11 {
  grid-column-end: 11;
}

.grid-span--12 {
  grid-column: span 12/span 12;
}

.grid-start--12 {
  grid-column-start: 12;
}

.grid-end--12 {
  grid-column-end: 12;
}

.grid-span--13 {
  grid-column: span 13/span 13;
}

.grid-start--13 {
  grid-column-start: 13;
}

.grid-end--13 {
  grid-column-end: 13;
}

@media (min-width: 720px) {
  .sm\:grid-cols--1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-cols--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:grid-cols--7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .sm\:grid-cols--8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .sm\:grid-cols--9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .sm\:grid-cols--10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .sm\:grid-cols--11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .sm\:grid-cols--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sm\:grid-col--auto {
    grid-column: auto;
  }
  .sm\:grid-col--start-auto {
    grid-column-start: auto;
  }
  .sm\:grid-col--end-auto {
    grid-end-start: auto;
  }
  .sm\:grid-col--full {
    grid-column: 1/-1;
  }
  .sm\:grid-span--1 {
    grid-column: span 1/span 1;
  }
  .sm\:grid-start--1 {
    grid-column-start: 1;
  }
  .sm\:grid-end--1 {
    grid-column-end: 1;
  }
  .sm\:grid-span--2 {
    grid-column: span 2/span 2;
  }
  .sm\:grid-start--2 {
    grid-column-start: 2;
  }
  .sm\:grid-end--2 {
    grid-column-end: 2;
  }
  .sm\:grid-span--3 {
    grid-column: span 3/span 3;
  }
  .sm\:grid-start--3 {
    grid-column-start: 3;
  }
  .sm\:grid-end--3 {
    grid-column-end: 3;
  }
  .sm\:grid-span--4 {
    grid-column: span 4/span 4;
  }
  .sm\:grid-start--4 {
    grid-column-start: 4;
  }
  .sm\:grid-end--4 {
    grid-column-end: 4;
  }
  .sm\:grid-span--5 {
    grid-column: span 5/span 5;
  }
  .sm\:grid-start--5 {
    grid-column-start: 5;
  }
  .sm\:grid-end--5 {
    grid-column-end: 5;
  }
  .sm\:grid-span--6 {
    grid-column: span 6/span 6;
  }
  .sm\:grid-start--6 {
    grid-column-start: 6;
  }
  .sm\:grid-end--6 {
    grid-column-end: 6;
  }
  .sm\:grid-span--7 {
    grid-column: span 7/span 7;
  }
  .sm\:grid-start--7 {
    grid-column-start: 7;
  }
  .sm\:grid-end--7 {
    grid-column-end: 7;
  }
  .sm\:grid-span--8 {
    grid-column: span 8/span 8;
  }
  .sm\:grid-start--8 {
    grid-column-start: 8;
  }
  .sm\:grid-end--8 {
    grid-column-end: 8;
  }
  .sm\:grid-span--9 {
    grid-column: span 9/span 9;
  }
  .sm\:grid-start--9 {
    grid-column-start: 9;
  }
  .sm\:grid-end--9 {
    grid-column-end: 9;
  }
  .sm\:grid-span--10 {
    grid-column: span 10/span 10;
  }
  .sm\:grid-start--10 {
    grid-column-start: 10;
  }
  .sm\:grid-end--10 {
    grid-column-end: 10;
  }
  .sm\:grid-span--11 {
    grid-column: span 11/span 11;
  }
  .sm\:grid-start--11 {
    grid-column-start: 11;
  }
  .sm\:grid-end--11 {
    grid-column-end: 11;
  }
  .sm\:grid-span--12 {
    grid-column: span 12/span 12;
  }
  .sm\:grid-start--12 {
    grid-column-start: 12;
  }
  .sm\:grid-end--12 {
    grid-column-end: 12;
  }
  .sm\:grid-span--13 {
    grid-column: span 13/span 13;
  }
  .sm\:grid-start--13 {
    grid-column-start: 13;
  }
  .sm\:grid-end--13 {
    grid-column-end: 13;
  }
}
@media (min-width: 1020px) {
  .md\:grid-cols--1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:grid-cols--7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .md\:grid-cols--8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .md\:grid-cols--9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .md\:grid-cols--10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .md\:grid-cols--11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .md\:grid-cols--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .md\:grid-col--auto {
    grid-column: auto;
  }
  .md\:grid-col--start-auto {
    grid-column-start: auto;
  }
  .md\:grid-col--end-auto {
    grid-end-start: auto;
  }
  .md\:grid-col--full {
    grid-column: 1/-1;
  }
  .md\:grid-span--1 {
    grid-column: span 1/span 1;
  }
  .md\:grid-start--1 {
    grid-column-start: 1;
  }
  .md\:grid-end--1 {
    grid-column-end: 1;
  }
  .md\:grid-span--2 {
    grid-column: span 2/span 2;
  }
  .md\:grid-start--2 {
    grid-column-start: 2;
  }
  .md\:grid-end--2 {
    grid-column-end: 2;
  }
  .md\:grid-span--3 {
    grid-column: span 3/span 3;
  }
  .md\:grid-start--3 {
    grid-column-start: 3;
  }
  .md\:grid-end--3 {
    grid-column-end: 3;
  }
  .md\:grid-span--4 {
    grid-column: span 4/span 4;
  }
  .md\:grid-start--4 {
    grid-column-start: 4;
  }
  .md\:grid-end--4 {
    grid-column-end: 4;
  }
  .md\:grid-span--5 {
    grid-column: span 5/span 5;
  }
  .md\:grid-start--5 {
    grid-column-start: 5;
  }
  .md\:grid-end--5 {
    grid-column-end: 5;
  }
  .md\:grid-span--6 {
    grid-column: span 6/span 6;
  }
  .md\:grid-start--6 {
    grid-column-start: 6;
  }
  .md\:grid-end--6 {
    grid-column-end: 6;
  }
  .md\:grid-span--7 {
    grid-column: span 7/span 7;
  }
  .md\:grid-start--7 {
    grid-column-start: 7;
  }
  .md\:grid-end--7 {
    grid-column-end: 7;
  }
  .md\:grid-span--8 {
    grid-column: span 8/span 8;
  }
  .md\:grid-start--8 {
    grid-column-start: 8;
  }
  .md\:grid-end--8 {
    grid-column-end: 8;
  }
  .md\:grid-span--9 {
    grid-column: span 9/span 9;
  }
  .md\:grid-start--9 {
    grid-column-start: 9;
  }
  .md\:grid-end--9 {
    grid-column-end: 9;
  }
  .md\:grid-span--10 {
    grid-column: span 10/span 10;
  }
  .md\:grid-start--10 {
    grid-column-start: 10;
  }
  .md\:grid-end--10 {
    grid-column-end: 10;
  }
  .md\:grid-span--11 {
    grid-column: span 11/span 11;
  }
  .md\:grid-start--11 {
    grid-column-start: 11;
  }
  .md\:grid-end--11 {
    grid-column-end: 11;
  }
  .md\:grid-span--12 {
    grid-column: span 12/span 12;
  }
  .md\:grid-start--12 {
    grid-column-start: 12;
  }
  .md\:grid-end--12 {
    grid-column-end: 12;
  }
  .md\:grid-span--13 {
    grid-column: span 13/span 13;
  }
  .md\:grid-start--13 {
    grid-column-start: 13;
  }
  .md\:grid-end--13 {
    grid-column-end: 13;
  }
}
@media (min-width: 1280px) {
  .lg\:grid-cols--1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols--7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:grid-cols--8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .lg\:grid-cols--9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .lg\:grid-cols--10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .lg\:grid-cols--11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .lg\:grid-cols--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg\:grid-col--auto {
    grid-column: auto;
  }
  .lg\:grid-col--start-auto {
    grid-column-start: auto;
  }
  .lg\:grid-col--end-auto {
    grid-end-start: auto;
  }
  .lg\:grid-col--full {
    grid-column: 1/-1;
  }
  .lg\:grid-span--1 {
    grid-column: span 1/span 1;
  }
  .lg\:grid-start--1 {
    grid-column-start: 1;
  }
  .lg\:grid-end--1 {
    grid-column-end: 1;
  }
  .lg\:grid-span--2 {
    grid-column: span 2/span 2;
  }
  .lg\:grid-start--2 {
    grid-column-start: 2;
  }
  .lg\:grid-end--2 {
    grid-column-end: 2;
  }
  .lg\:grid-span--3 {
    grid-column: span 3/span 3;
  }
  .lg\:grid-start--3 {
    grid-column-start: 3;
  }
  .lg\:grid-end--3 {
    grid-column-end: 3;
  }
  .lg\:grid-span--4 {
    grid-column: span 4/span 4;
  }
  .lg\:grid-start--4 {
    grid-column-start: 4;
  }
  .lg\:grid-end--4 {
    grid-column-end: 4;
  }
  .lg\:grid-span--5 {
    grid-column: span 5/span 5;
  }
  .lg\:grid-start--5 {
    grid-column-start: 5;
  }
  .lg\:grid-end--5 {
    grid-column-end: 5;
  }
  .lg\:grid-span--6 {
    grid-column: span 6/span 6;
  }
  .lg\:grid-start--6 {
    grid-column-start: 6;
  }
  .lg\:grid-end--6 {
    grid-column-end: 6;
  }
  .lg\:grid-span--7 {
    grid-column: span 7/span 7;
  }
  .lg\:grid-start--7 {
    grid-column-start: 7;
  }
  .lg\:grid-end--7 {
    grid-column-end: 7;
  }
  .lg\:grid-span--8 {
    grid-column: span 8/span 8;
  }
  .lg\:grid-start--8 {
    grid-column-start: 8;
  }
  .lg\:grid-end--8 {
    grid-column-end: 8;
  }
  .lg\:grid-span--9 {
    grid-column: span 9/span 9;
  }
  .lg\:grid-start--9 {
    grid-column-start: 9;
  }
  .lg\:grid-end--9 {
    grid-column-end: 9;
  }
  .lg\:grid-span--10 {
    grid-column: span 10/span 10;
  }
  .lg\:grid-start--10 {
    grid-column-start: 10;
  }
  .lg\:grid-end--10 {
    grid-column-end: 10;
  }
  .lg\:grid-span--11 {
    grid-column: span 11/span 11;
  }
  .lg\:grid-start--11 {
    grid-column-start: 11;
  }
  .lg\:grid-end--11 {
    grid-column-end: 11;
  }
  .lg\:grid-span--12 {
    grid-column: span 12/span 12;
  }
  .lg\:grid-start--12 {
    grid-column-start: 12;
  }
  .lg\:grid-end--12 {
    grid-column-end: 12;
  }
  .lg\:grid-span--13 {
    grid-column: span 13/span 13;
  }
  .lg\:grid-start--13 {
    grid-column-start: 13;
  }
  .lg\:grid-end--13 {
    grid-column-end: 13;
  }
}
@media (min-width: 1440px) {
  .xl\:grid-cols--1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xl\:grid-cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:grid-cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-cols--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xl\:grid-cols--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl\:grid-cols--7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xl\:grid-cols--8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xl\:grid-cols--9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xl\:grid-cols--10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xl\:grid-cols--11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xl\:grid-cols--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .xl\:grid-col--auto {
    grid-column: auto;
  }
  .xl\:grid-col--start-auto {
    grid-column-start: auto;
  }
  .xl\:grid-col--end-auto {
    grid-end-start: auto;
  }
  .xl\:grid-col--full {
    grid-column: 1/-1;
  }
  .xl\:grid-span--1 {
    grid-column: span 1/span 1;
  }
  .xl\:grid-start--1 {
    grid-column-start: 1;
  }
  .xl\:grid-end--1 {
    grid-column-end: 1;
  }
  .xl\:grid-span--2 {
    grid-column: span 2/span 2;
  }
  .xl\:grid-start--2 {
    grid-column-start: 2;
  }
  .xl\:grid-end--2 {
    grid-column-end: 2;
  }
  .xl\:grid-span--3 {
    grid-column: span 3/span 3;
  }
  .xl\:grid-start--3 {
    grid-column-start: 3;
  }
  .xl\:grid-end--3 {
    grid-column-end: 3;
  }
  .xl\:grid-span--4 {
    grid-column: span 4/span 4;
  }
  .xl\:grid-start--4 {
    grid-column-start: 4;
  }
  .xl\:grid-end--4 {
    grid-column-end: 4;
  }
  .xl\:grid-span--5 {
    grid-column: span 5/span 5;
  }
  .xl\:grid-start--5 {
    grid-column-start: 5;
  }
  .xl\:grid-end--5 {
    grid-column-end: 5;
  }
  .xl\:grid-span--6 {
    grid-column: span 6/span 6;
  }
  .xl\:grid-start--6 {
    grid-column-start: 6;
  }
  .xl\:grid-end--6 {
    grid-column-end: 6;
  }
  .xl\:grid-span--7 {
    grid-column: span 7/span 7;
  }
  .xl\:grid-start--7 {
    grid-column-start: 7;
  }
  .xl\:grid-end--7 {
    grid-column-end: 7;
  }
  .xl\:grid-span--8 {
    grid-column: span 8/span 8;
  }
  .xl\:grid-start--8 {
    grid-column-start: 8;
  }
  .xl\:grid-end--8 {
    grid-column-end: 8;
  }
  .xl\:grid-span--9 {
    grid-column: span 9/span 9;
  }
  .xl\:grid-start--9 {
    grid-column-start: 9;
  }
  .xl\:grid-end--9 {
    grid-column-end: 9;
  }
  .xl\:grid-span--10 {
    grid-column: span 10/span 10;
  }
  .xl\:grid-start--10 {
    grid-column-start: 10;
  }
  .xl\:grid-end--10 {
    grid-column-end: 10;
  }
  .xl\:grid-span--11 {
    grid-column: span 11/span 11;
  }
  .xl\:grid-start--11 {
    grid-column-start: 11;
  }
  .xl\:grid-end--11 {
    grid-column-end: 11;
  }
  .xl\:grid-span--12 {
    grid-column: span 12/span 12;
  }
  .xl\:grid-start--12 {
    grid-column-start: 12;
  }
  .xl\:grid-end--12 {
    grid-column-end: 12;
  }
  .xl\:grid-span--13 {
    grid-column: span 13/span 13;
  }
  .xl\:grid-start--13 {
    grid-column-start: 13;
  }
  .xl\:grid-end--13 {
    grid-column-end: 13;
  }
}
/* RIVER Design-System: Helpers - Flex Cols */
.flex-cols {
  --column-gap: var(--sizes-gutter-normal);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

:where(.flex-cols) {
  margin-left: calc(var(--column-gap) * -1);
  margin-right: calc(var(--column-gap) * -1);
}

.flex-col {
  max-width: 100%;
}

:where(.flex-col) {
  padding-left: var(--column-gap);
  padding-right: var(--column-gap);
}

.flex-cols--inline {
  display: inline-flex;
}

.flex-cols--center {
  justify-content: center;
}

.flex-cols--justify {
  justify-content: space-between;
  align-content: space-between;
}

.flex-cols--equal > *:where(.flex-col) {
  flex: 1 0 0%;
}

.flex-cols--small {
  --column-gap: var(--sizes-gutter-small);
}

.flex-cols--normal {
  --column-gap: var(--sizes-gutter-normal);
}

.flex-cols--large {
  --column-gap: var(--sizes-gutter-large);
}

.flex-cols--nogap {
  --column-gap: 0;
}

.flex-col--auto {
  flex: 1 0 0%;
}

.flex-col--full {
  flex: 0 0 100%;
}

.flex-col--fixed {
  flex: 0 0 auto;
}

@media (min-width: 720px) {
  .sm\:flex-col--auto {
    flex: 1 0 0%;
  }
  .sm\:flex-col--full {
    flex: 0 0 100%;
  }
  .sm\:flex-col--fixed {
    flex: 0 0 auto;
  }
}
@media (min-width: 1020px) {
  .md\:flex-col--auto {
    flex: 1 0 0%;
  }
  .md\:flex-col--full {
    flex: 0 0 100%;
  }
  .md\:flex-col--fixed {
    flex: 0 0 auto;
  }
}
@media (min-width: 1280px) {
  .lg\:flex-col--auto {
    flex: 1 0 0%;
  }
  .lg\:flex-col--full {
    flex: 0 0 100%;
  }
  .lg\:flex-col--fixed {
    flex: 0 0 auto;
  }
}
@media (min-width: 1440px) {
  .xl\:flex-col--auto {
    flex: 1 0 0%;
  }
  .xl\:flex-col--full {
    flex: 0 0 100%;
  }
  .xl\:flex-col--fixed {
    flex: 0 0 auto;
  }
}
/* RIVER Design-System: Helpers - Flex / General */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-center-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* RIVER Design-System: Utilities */
/* display-important */
.none {
  display: none;
}

.none\! {
  display: none !important;
}

.block {
  display: block;
}

.block\! {
  display: block !important;
}

.inline-block {
  display: inline-block;
}

.inline-block\! {
  display: inline-block !important;
}

.inline {
  display: inline;
}

.inline\! {
  display: inline !important;
}

/* display-common */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

.flow-root {
  display: flow-root;
}

/* position */
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* text */
.text-align--center {
  text-align: center;
}

.text-align--left {
  text-align: left;
}

.text-align--right {
  text-align: right;
}

.text-align--justify {
  text-align: text;
}

/* flex-direction */
.direction--row {
  flex-direction: row;
}

.direction--row-reverse {
  flex-direction: row-reverse;
}

.direction--col {
  flex-direction: column;
}

.direction--col-reverse {
  flex-direction: column-reverse;
}

/* flex-wrap */
.flex-wrap--none {
  flex-wrap: nowrap;
}

.flex-wrap--wrap {
  flex-wrap: wrap;
}

.flex-wrap--reverse {
  flex-wrap: wrap-reverse;
}

/* justify-content */
.justify--start {
  justify-content: flex-start;
}

.justify--end {
  justify-content: flex-end;
}

.justify--center {
  justify-content: center;
}

.justify--between {
  justify-content: space-between;
}

.justify--around {
  justify-content: space-around;
}

.justify--evenly {
  justify-content: space-evenly;
}

/* align-items */
.align--stretch {
  align-items: stretch;
}

.align--start {
  align-items: flex-start;
}

.align--center {
  align-items: center;
}

.align--end {
  align-items: flex-end;
}

.align--baseline {
  align-items: baseline;
}

/* border-helpers */
.border--normal {
  border: solid 2px var(--colors-gray-border);
}

.border--input {
  border: solid 2px var(--colors-gray-border);
}

/* design-color-all */
.color--white {
  color: var(--colors-white);
}

.color--black {
  color: var(--colors-black);
}

.color--base {
  color: var(--colors-base);
}

.color--reverse {
  color: var(--colors-reverse);
}

.color--primary\.dark {
  color: var(--colors-primary-dark);
}

.color--primary\.title {
  color: var(--colors-primary-title);
}

.color--primary {
  color: var(--colors-primary-normal);
}

.color--primary\.normal {
  color: var(--colors-primary-normal);
}

.color--primary\.light {
  color: var(--colors-primary-light);
}

.color--primary\.border {
  color: var(--colors-primary-border);
}

.color--primary\.bg {
  color: var(--colors-primary-bg);
}

.color--primary\.alpha {
  color: var(--colors-primary-alpha);
}

.color--secondary\.dark {
  color: var(--colors-secondary-dark);
}

.color--secondary\.title {
  color: var(--colors-secondary-title);
}

.color--secondary {
  color: var(--colors-secondary-normal);
}

.color--secondary\.normal {
  color: var(--colors-secondary-normal);
}

.color--secondary\.light {
  color: var(--colors-secondary-light);
}

.color--secondary\.border {
  color: var(--colors-secondary-border);
}

.color--secondary\.bg {
  color: var(--colors-secondary-bg);
}

.color--secondary\.alpha {
  color: var(--colors-secondary-alpha);
}

.color--gray\.dark {
  color: var(--colors-gray-dark);
}

.color--gray\.title {
  color: var(--colors-gray-title);
}

.color--gray {
  color: var(--colors-gray-normal);
}

.color--gray\.normal {
  color: var(--colors-gray-normal);
}

.color--gray\.light {
  color: var(--colors-gray-light);
}

.color--gray\.border {
  color: var(--colors-gray-border);
}

.color--gray\.bg {
  color: var(--colors-gray-bg);
}

.color--gray\.alpha {
  color: var(--colors-gray-alpha);
}

.bg--white {
  background-color: var(--colors-white);
}

.bg--black {
  background-color: var(--colors-black);
}

.bg--base {
  background-color: var(--colors-base);
}

.bg--reverse {
  background-color: var(--colors-reverse);
}

.bg--primary\.dark {
  background-color: var(--colors-primary-dark);
}

.bg--primary\.title {
  background-color: var(--colors-primary-title);
}

.bg--primary {
  background-color: var(--colors-primary-normal);
}

.bg--primary\.normal {
  background-color: var(--colors-primary-normal);
}

.bg--primary\.light {
  background-color: var(--colors-primary-light);
}

.bg--primary\.border {
  background-color: var(--colors-primary-border);
}

.bg--primary\.bg {
  background-color: var(--colors-primary-bg);
}

.bg--primary\.alpha {
  background-color: var(--colors-primary-alpha);
}

.bg--secondary\.dark {
  background-color: var(--colors-secondary-dark);
}

.bg--secondary\.title {
  background-color: var(--colors-secondary-title);
}

.bg--secondary {
  background-color: var(--colors-secondary-normal);
}

.bg--secondary\.normal {
  background-color: var(--colors-secondary-normal);
}

.bg--secondary\.light {
  background-color: var(--colors-secondary-light);
}

.bg--secondary\.border {
  background-color: var(--colors-secondary-border);
}

.bg--secondary\.bg {
  background-color: var(--colors-secondary-bg);
}

.bg--secondary\.alpha {
  background-color: var(--colors-secondary-alpha);
}

.bg--gray\.dark {
  background-color: var(--colors-gray-dark);
}

.bg--gray\.title {
  background-color: var(--colors-gray-title);
}

.bg--gray {
  background-color: var(--colors-gray-normal);
}

.bg--gray\.normal {
  background-color: var(--colors-gray-normal);
}

.bg--gray\.light {
  background-color: var(--colors-gray-light);
}

.bg--gray\.border {
  background-color: var(--colors-gray-border);
}

.bg--gray\.bg {
  background-color: var(--colors-gray-bg);
}

.bg--gray\.alpha {
  background-color: var(--colors-gray-alpha);
}

.border--white {
  border-color: var(--colors-white);
}

.border--black {
  border-color: var(--colors-black);
}

.border--base {
  border-color: var(--colors-base);
}

.border--reverse {
  border-color: var(--colors-reverse);
}

.border--primary\.dark {
  border-color: var(--colors-primary-dark);
}

.border--primary\.title {
  border-color: var(--colors-primary-title);
}

.border--primary {
  border-color: var(--colors-primary-normal);
}

.border--primary\.normal {
  border-color: var(--colors-primary-normal);
}

.border--primary\.light {
  border-color: var(--colors-primary-light);
}

.border--primary\.border {
  border-color: var(--colors-primary-border);
}

.border--primary\.bg {
  border-color: var(--colors-primary-bg);
}

.border--primary\.alpha {
  border-color: var(--colors-primary-alpha);
}

.border--secondary\.dark {
  border-color: var(--colors-secondary-dark);
}

.border--secondary\.title {
  border-color: var(--colors-secondary-title);
}

.border--secondary {
  border-color: var(--colors-secondary-normal);
}

.border--secondary\.normal {
  border-color: var(--colors-secondary-normal);
}

.border--secondary\.light {
  border-color: var(--colors-secondary-light);
}

.border--secondary\.border {
  border-color: var(--colors-secondary-border);
}

.border--secondary\.bg {
  border-color: var(--colors-secondary-bg);
}

.border--secondary\.alpha {
  border-color: var(--colors-secondary-alpha);
}

.border--gray\.dark {
  border-color: var(--colors-gray-dark);
}

.border--gray\.title {
  border-color: var(--colors-gray-title);
}

.border--gray {
  border-color: var(--colors-gray-normal);
}

.border--gray\.normal {
  border-color: var(--colors-gray-normal);
}

.border--gray\.light {
  border-color: var(--colors-gray-light);
}

.border--gray\.border {
  border-color: var(--colors-gray-border);
}

.border--gray\.bg {
  border-color: var(--colors-gray-bg);
}

.border--gray\.alpha {
  border-color: var(--colors-gray-alpha);
}

/* design-notifications-text */
.color--success\.text {
  color: #047857;
}

.color--info\.text {
  color: #3A61D8;
}

.color--warning\.text {
  color: #c2410c;
}

.color--error\.text {
  color: #be123c;
}

/* design-notifications-bg */
.bg--success\.bg {
  background-color: #a7f3d0;
}

.bg--info\.bg {
  background-color: #E1E7FE;
}

.bg--warning\.bg {
  background-color: #fed7aa;
}

.bg--error\.bg {
  background-color: #fecdd3;
}

/* design-notifications-border */
.border--success\.border {
  border-color: #10b981;
}

.border--info\.border {
  border-color: #4B72E6;
}

.border--warning\.border {
  border-color: #f97316;
}

.border--error\.border {
  border-color: #f43f5e;
}

/* design-type-size */
.font-size--x-small {
  font-size: var(--type-size-x-small);
}

.font-size--small {
  font-size: var(--type-size-small);
}

.font-size--normal {
  font-size: var(--type-size-normal);
}

.font-size--large {
  font-size: var(--type-size-large);
}

.font-size--x-large {
  font-size: var(--type-size-x-large);
}

.font-size--title-1 {
  font-size: var(--type-size-title-1);
}

.font-size--title-2 {
  font-size: var(--type-size-title-2);
}

.font-size--title-3 {
  font-size: var(--type-size-title-3);
}

.font-size--title-4 {
  font-size: var(--type-size-title-4);
}

.font-size--title-5 {
  font-size: var(--type-size-title-5);
}

.font-size--title-6 {
  font-size: var(--type-size-title-6);
}

/* design-type-weight */
.font-weight--normal {
  font-weight: var(--type-weight-normal);
}

.font-weight--bold {
  font-weight: var(--type-weight-bold);
}

/* design-type-spacing */
.spacing--normal {
  margin-bottom: var(--type-spacing-normal);
}

.spacing--small {
  margin-bottom: var(--type-spacing-small);
}

.spacing--title {
  margin-bottom: var(--type-spacing-title);
}

.spacing--none {
  margin-bottom: var(--type-spacing-none);
}

/* design-dimension-width */
.w--subtle {
  width: var(--sizes-size-subtle);
}

.w--smallest {
  width: var(--sizes-size-smallest);
}

.w--x-small {
  width: var(--sizes-size-x-small);
}

.w--small {
  width: var(--sizes-size-small);
}

.w--normal {
  width: var(--sizes-size-normal);
}

.w--large {
  width: var(--sizes-size-large);
}

.w--x-large {
  width: var(--sizes-size-x-large);
}

/* design-dimension-height */
.h--subtle {
  height: var(--sizes-size-subtle);
}

.h--smallest {
  height: var(--sizes-size-smallest);
}

.h--x-small {
  height: var(--sizes-size-x-small);
}

.h--small {
  height: var(--sizes-size-small);
}

.h--normal {
  height: var(--sizes-size-normal);
}

.h--large {
  height: var(--sizes-size-large);
}

.h--x-large {
  height: var(--sizes-size-x-large);
}

/* dimension-helpers */
.w--auto {
  width: auto;
}

.w--none {
  width: 0;
}

.w--full {
  width: 100%;
}

.h--auto {
  height: auto;
}

.h--none {
  height: 0;
}

.h--full {
  height: 100%;
}

/* design-margin */
.m--subtle {
  margin: var(--sizes-size-subtle);
}

.m--smallest {
  margin: var(--sizes-size-smallest);
}

.m--x-small {
  margin: var(--sizes-size-x-small);
}

.m--small {
  margin: var(--sizes-size-small);
}

.m--normal {
  margin: var(--sizes-size-normal);
}

.m--large {
  margin: var(--sizes-size-large);
}

.m--x-large {
  margin: var(--sizes-size-x-large);
}

.mt--subtle {
  margin-top: var(--sizes-size-subtle);
}

.mt--smallest {
  margin-top: var(--sizes-size-smallest);
}

.mt--x-small {
  margin-top: var(--sizes-size-x-small);
}

.mt--small {
  margin-top: var(--sizes-size-small);
}

.mt--normal {
  margin-top: var(--sizes-size-normal);
}

.mt--large {
  margin-top: var(--sizes-size-large);
}

.mt--x-large {
  margin-top: var(--sizes-size-x-large);
}

.mr--subtle {
  margin-right: var(--sizes-size-subtle);
}

.mr--smallest {
  margin-right: var(--sizes-size-smallest);
}

.mr--x-small {
  margin-right: var(--sizes-size-x-small);
}

.mr--small {
  margin-right: var(--sizes-size-small);
}

.mr--normal {
  margin-right: var(--sizes-size-normal);
}

.mr--large {
  margin-right: var(--sizes-size-large);
}

.mr--x-large {
  margin-right: var(--sizes-size-x-large);
}

.mb--subtle {
  margin-bottom: var(--sizes-size-subtle);
}

.mb--smallest {
  margin-bottom: var(--sizes-size-smallest);
}

.mb--x-small {
  margin-bottom: var(--sizes-size-x-small);
}

.mb--small {
  margin-bottom: var(--sizes-size-small);
}

.mb--normal {
  margin-bottom: var(--sizes-size-normal);
}

.mb--large {
  margin-bottom: var(--sizes-size-large);
}

.mb--x-large {
  margin-bottom: var(--sizes-size-x-large);
}

.ml--subtle {
  margin-left: var(--sizes-size-subtle);
}

.ml--smallest {
  margin-left: var(--sizes-size-smallest);
}

.ml--x-small {
  margin-left: var(--sizes-size-x-small);
}

.ml--small {
  margin-left: var(--sizes-size-small);
}

.ml--normal {
  margin-left: var(--sizes-size-normal);
}

.ml--large {
  margin-left: var(--sizes-size-large);
}

.ml--x-large {
  margin-left: var(--sizes-size-x-large);
}

.mx--subtle {
  margin-left: var(--sizes-size-subtle);
  margin-right: var(--sizes-size-subtle);
}

.mx--smallest {
  margin-left: var(--sizes-size-smallest);
  margin-right: var(--sizes-size-smallest);
}

.mx--x-small {
  margin-left: var(--sizes-size-x-small);
  margin-right: var(--sizes-size-x-small);
}

.mx--small {
  margin-left: var(--sizes-size-small);
  margin-right: var(--sizes-size-small);
}

.mx--normal {
  margin-left: var(--sizes-size-normal);
  margin-right: var(--sizes-size-normal);
}

.mx--large {
  margin-left: var(--sizes-size-large);
  margin-right: var(--sizes-size-large);
}

.mx--x-large {
  margin-left: var(--sizes-size-x-large);
  margin-right: var(--sizes-size-x-large);
}

.my--subtle {
  margin-top: var(--sizes-size-subtle);
  margin-bottom: var(--sizes-size-subtle);
}

.my--smallest {
  margin-top: var(--sizes-size-smallest);
  margin-bottom: var(--sizes-size-smallest);
}

.my--x-small {
  margin-top: var(--sizes-size-x-small);
  margin-bottom: var(--sizes-size-x-small);
}

.my--small {
  margin-top: var(--sizes-size-small);
  margin-bottom: var(--sizes-size-small);
}

.my--normal {
  margin-top: var(--sizes-size-normal);
  margin-bottom: var(--sizes-size-normal);
}

.my--large {
  margin-top: var(--sizes-size-large);
  margin-bottom: var(--sizes-size-large);
}

.my--x-large {
  margin-top: var(--sizes-size-x-large);
  margin-bottom: var(--sizes-size-x-large);
}

/* margin-helpers */
.m--auto {
  margin: auto;
}

.m--none {
  margin: 0;
}

.mt--auto {
  margin-top: auto;
}

.mt--none {
  margin-top: 0;
}

.mr--auto {
  margin-right: auto;
}

.mr--none {
  margin-right: 0;
}

.mb--auto {
  margin-bottom: auto;
}

.mb--none {
  margin-bottom: 0;
}

.ml--auto {
  margin-left: auto;
}

.ml--none {
  margin-left: 0;
}

.mx--auto {
  margin-left: auto;
  margin-right: auto;
}

.mx--none {
  margin-left: 0;
  margin-right: 0;
}

.my--auto {
  margin-top: auto;
  margin-bottom: auto;
}

.my--none {
  margin-top: 0;
  margin-bottom: 0;
}

/* design-padding */
.p--subtle {
  padding: var(--sizes-size-subtle);
}

.p--smallest {
  padding: var(--sizes-size-smallest);
}

.p--x-small {
  padding: var(--sizes-size-x-small);
}

.p--small {
  padding: var(--sizes-size-small);
}

.p--normal {
  padding: var(--sizes-size-normal);
}

.p--large {
  padding: var(--sizes-size-large);
}

.p--x-large {
  padding: var(--sizes-size-x-large);
}

.pt--subtle {
  padding-top: var(--sizes-size-subtle);
}

.pt--smallest {
  padding-top: var(--sizes-size-smallest);
}

.pt--x-small {
  padding-top: var(--sizes-size-x-small);
}

.pt--small {
  padding-top: var(--sizes-size-small);
}

.pt--normal {
  padding-top: var(--sizes-size-normal);
}

.pt--large {
  padding-top: var(--sizes-size-large);
}

.pt--x-large {
  padding-top: var(--sizes-size-x-large);
}

.pr--subtle {
  padding-right: var(--sizes-size-subtle);
}

.pr--smallest {
  padding-right: var(--sizes-size-smallest);
}

.pr--x-small {
  padding-right: var(--sizes-size-x-small);
}

.pr--small {
  padding-right: var(--sizes-size-small);
}

.pr--normal {
  padding-right: var(--sizes-size-normal);
}

.pr--large {
  padding-right: var(--sizes-size-large);
}

.pr--x-large {
  padding-right: var(--sizes-size-x-large);
}

.pb--subtle {
  padding-bottom: var(--sizes-size-subtle);
}

.pb--smallest {
  padding-bottom: var(--sizes-size-smallest);
}

.pb--x-small {
  padding-bottom: var(--sizes-size-x-small);
}

.pb--small {
  padding-bottom: var(--sizes-size-small);
}

.pb--normal {
  padding-bottom: var(--sizes-size-normal);
}

.pb--large {
  padding-bottom: var(--sizes-size-large);
}

.pb--x-large {
  padding-bottom: var(--sizes-size-x-large);
}

.pl--subtle {
  padding-left: var(--sizes-size-subtle);
}

.pl--smallest {
  padding-left: var(--sizes-size-smallest);
}

.pl--x-small {
  padding-left: var(--sizes-size-x-small);
}

.pl--small {
  padding-left: var(--sizes-size-small);
}

.pl--normal {
  padding-left: var(--sizes-size-normal);
}

.pl--large {
  padding-left: var(--sizes-size-large);
}

.pl--x-large {
  padding-left: var(--sizes-size-x-large);
}

.px--subtle {
  padding-left: var(--sizes-size-subtle);
  padding-right: var(--sizes-size-subtle);
}

.px--smallest {
  padding-left: var(--sizes-size-smallest);
  padding-right: var(--sizes-size-smallest);
}

.px--x-small {
  padding-left: var(--sizes-size-x-small);
  padding-right: var(--sizes-size-x-small);
}

.px--small {
  padding-left: var(--sizes-size-small);
  padding-right: var(--sizes-size-small);
}

.px--normal {
  padding-left: var(--sizes-size-normal);
  padding-right: var(--sizes-size-normal);
}

.px--large {
  padding-left: var(--sizes-size-large);
  padding-right: var(--sizes-size-large);
}

.px--x-large {
  padding-left: var(--sizes-size-x-large);
  padding-right: var(--sizes-size-x-large);
}

.py--subtle {
  padding-top: var(--sizes-size-subtle);
  padding-bottom: var(--sizes-size-subtle);
}

.py--smallest {
  padding-top: var(--sizes-size-smallest);
  padding-bottom: var(--sizes-size-smallest);
}

.py--x-small {
  padding-top: var(--sizes-size-x-small);
  padding-bottom: var(--sizes-size-x-small);
}

.py--small {
  padding-top: var(--sizes-size-small);
  padding-bottom: var(--sizes-size-small);
}

.py--normal {
  padding-top: var(--sizes-size-normal);
  padding-bottom: var(--sizes-size-normal);
}

.py--large {
  padding-top: var(--sizes-size-large);
  padding-bottom: var(--sizes-size-large);
}

.py--x-large {
  padding-top: var(--sizes-size-x-large);
  padding-bottom: var(--sizes-size-x-large);
}

/* padding-helpers */
.p--none {
  padding: 0;
}

.pt--none {
  padding-top: 0;
}

.pr--none {
  padding-right: 0;
}

.pb--none {
  padding-bottom: 0;
}

.pl--none {
  padding-left: 0;
}

.px--none {
  padding-left: 0;
  padding-right: 0;
}

.py--none {
  padding-top: 0;
  padding-bottom: 0;
}

/* design-padding-box */
.box--small {
  padding: var(--sizes-padding-small);
}

.box--normal {
  padding: var(--sizes-padding-normal);
}

.box--large {
  padding: var(--sizes-padding-large);
}

/* design-gap */
.gap--subtle {
  gap: var(--sizes-size-subtle);
}

.gap--smallest {
  gap: var(--sizes-size-smallest);
}

.gap--x-small {
  gap: var(--sizes-size-x-small);
}

.gap--small {
  gap: var(--sizes-size-small);
}

.gap--normal {
  gap: var(--sizes-size-normal);
}

.gap--large {
  gap: var(--sizes-size-large);
}

.gap--x-large {
  gap: var(--sizes-size-x-large);
}

.gap-x--subtle {
  -moz-column-gap: var(--sizes-size-subtle);
       column-gap: var(--sizes-size-subtle);
}

.gap-x--smallest {
  -moz-column-gap: var(--sizes-size-smallest);
       column-gap: var(--sizes-size-smallest);
}

.gap-x--x-small {
  -moz-column-gap: var(--sizes-size-x-small);
       column-gap: var(--sizes-size-x-small);
}

.gap-x--small {
  -moz-column-gap: var(--sizes-size-small);
       column-gap: var(--sizes-size-small);
}

.gap-x--normal {
  -moz-column-gap: var(--sizes-size-normal);
       column-gap: var(--sizes-size-normal);
}

.gap-x--large {
  -moz-column-gap: var(--sizes-size-large);
       column-gap: var(--sizes-size-large);
}

.gap-x--x-large {
  -moz-column-gap: var(--sizes-size-x-large);
       column-gap: var(--sizes-size-x-large);
}

.gap-y--subtle {
  row-gap: var(--sizes-size-subtle);
}

.gap-y--smallest {
  row-gap: var(--sizes-size-smallest);
}

.gap-y--x-small {
  row-gap: var(--sizes-size-x-small);
}

.gap-y--small {
  row-gap: var(--sizes-size-small);
}

.gap-y--normal {
  row-gap: var(--sizes-size-normal);
}

.gap-y--large {
  row-gap: var(--sizes-size-large);
}

.gap-y--x-large {
  row-gap: var(--sizes-size-x-large);
}

/* gap-helpers */
.gap--none {
  gap: 0;
}

.gap-x--none {
  -moz-column-gap: 0;
       column-gap: 0;
}

.gap-y--none {
  row-gap: 0;
}

@media (min-width: 720px) {
  /* display-important @ sm */
  .sm\:none {
    display: none;
  }
  .sm\:none\! {
    display: none !important;
  }
  .sm\:block {
    display: block;
  }
  .sm\:block\! {
    display: block !important;
  }
  .sm\:inline-block {
    display: inline-block;
  }
  .sm\:inline-block\! {
    display: inline-block !important;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:inline\! {
    display: inline !important;
  }
  /* text @ sm */
  .sm\:text-align--center {
    text-align: center;
  }
  .sm\:text-align--left {
    text-align: left;
  }
  .sm\:text-align--right {
    text-align: right;
  }
  .sm\:text-align--justify {
    text-align: text;
  }
  /* flex-direction @ sm */
  .sm\:direction--row {
    flex-direction: row;
  }
  .sm\:direction--row-reverse {
    flex-direction: row-reverse;
  }
  .sm\:direction--col {
    flex-direction: column;
  }
  .sm\:direction--col-reverse {
    flex-direction: column-reverse;
  }
  /* justify-content @ sm */
  .sm\:justify--start {
    justify-content: flex-start;
  }
  .sm\:justify--end {
    justify-content: flex-end;
  }
  .sm\:justify--center {
    justify-content: center;
  }
  .sm\:justify--between {
    justify-content: space-between;
  }
  .sm\:justify--around {
    justify-content: space-around;
  }
  .sm\:justify--evenly {
    justify-content: space-evenly;
  }
  /* align-items @ sm */
  .sm\:align--stretch {
    align-items: stretch;
  }
  .sm\:align--start {
    align-items: flex-start;
  }
  .sm\:align--center {
    align-items: center;
  }
  .sm\:align--end {
    align-items: flex-end;
  }
  .sm\:align--baseline {
    align-items: baseline;
  }
  /* design-type-size @ sm */
  .sm\:font-size--x-small {
    font-size: var(--type-size-x-small);
  }
  .sm\:font-size--small {
    font-size: var(--type-size-small);
  }
  .sm\:font-size--normal {
    font-size: var(--type-size-normal);
  }
  .sm\:font-size--large {
    font-size: var(--type-size-large);
  }
  .sm\:font-size--x-large {
    font-size: var(--type-size-x-large);
  }
  .sm\:font-size--title-1 {
    font-size: var(--type-size-title-1);
  }
  .sm\:font-size--title-2 {
    font-size: var(--type-size-title-2);
  }
  .sm\:font-size--title-3 {
    font-size: var(--type-size-title-3);
  }
  .sm\:font-size--title-4 {
    font-size: var(--type-size-title-4);
  }
  .sm\:font-size--title-5 {
    font-size: var(--type-size-title-5);
  }
  .sm\:font-size--title-6 {
    font-size: var(--type-size-title-6);
  }
}
@media (min-width: 1020px) {
  /* display-important @ md */
  .md\:none {
    display: none;
  }
  .md\:none\! {
    display: none !important;
  }
  .md\:block {
    display: block;
  }
  .md\:block\! {
    display: block !important;
  }
  .md\:inline-block {
    display: inline-block;
  }
  .md\:inline-block\! {
    display: inline-block !important;
  }
  .md\:inline {
    display: inline;
  }
  .md\:inline\! {
    display: inline !important;
  }
  /* text @ md */
  .md\:text-align--center {
    text-align: center;
  }
  .md\:text-align--left {
    text-align: left;
  }
  .md\:text-align--right {
    text-align: right;
  }
  .md\:text-align--justify {
    text-align: text;
  }
  /* flex-direction @ md */
  .md\:direction--row {
    flex-direction: row;
  }
  .md\:direction--row-reverse {
    flex-direction: row-reverse;
  }
  .md\:direction--col {
    flex-direction: column;
  }
  .md\:direction--col-reverse {
    flex-direction: column-reverse;
  }
  /* justify-content @ md */
  .md\:justify--start {
    justify-content: flex-start;
  }
  .md\:justify--end {
    justify-content: flex-end;
  }
  .md\:justify--center {
    justify-content: center;
  }
  .md\:justify--between {
    justify-content: space-between;
  }
  .md\:justify--around {
    justify-content: space-around;
  }
  .md\:justify--evenly {
    justify-content: space-evenly;
  }
  /* align-items @ md */
  .md\:align--stretch {
    align-items: stretch;
  }
  .md\:align--start {
    align-items: flex-start;
  }
  .md\:align--center {
    align-items: center;
  }
  .md\:align--end {
    align-items: flex-end;
  }
  .md\:align--baseline {
    align-items: baseline;
  }
  /* design-type-size @ md */
  .md\:font-size--x-small {
    font-size: var(--type-size-x-small);
  }
  .md\:font-size--small {
    font-size: var(--type-size-small);
  }
  .md\:font-size--normal {
    font-size: var(--type-size-normal);
  }
  .md\:font-size--large {
    font-size: var(--type-size-large);
  }
  .md\:font-size--x-large {
    font-size: var(--type-size-x-large);
  }
  .md\:font-size--title-1 {
    font-size: var(--type-size-title-1);
  }
  .md\:font-size--title-2 {
    font-size: var(--type-size-title-2);
  }
  .md\:font-size--title-3 {
    font-size: var(--type-size-title-3);
  }
  .md\:font-size--title-4 {
    font-size: var(--type-size-title-4);
  }
  .md\:font-size--title-5 {
    font-size: var(--type-size-title-5);
  }
  .md\:font-size--title-6 {
    font-size: var(--type-size-title-6);
  }
  /* design-dimension-width @ md */
  .md\:w--subtle {
    width: var(--sizes-size-subtle);
  }
  .md\:w--smallest {
    width: var(--sizes-size-smallest);
  }
  .md\:w--x-small {
    width: var(--sizes-size-x-small);
  }
  .md\:w--small {
    width: var(--sizes-size-small);
  }
  .md\:w--normal {
    width: var(--sizes-size-normal);
  }
  .md\:w--large {
    width: var(--sizes-size-large);
  }
  .md\:w--x-large {
    width: var(--sizes-size-x-large);
  }
  /* design-dimension-height @ md */
  .md\:h--subtle {
    height: var(--sizes-size-subtle);
  }
  .md\:h--smallest {
    height: var(--sizes-size-smallest);
  }
  .md\:h--x-small {
    height: var(--sizes-size-x-small);
  }
  .md\:h--small {
    height: var(--sizes-size-small);
  }
  .md\:h--normal {
    height: var(--sizes-size-normal);
  }
  .md\:h--large {
    height: var(--sizes-size-large);
  }
  .md\:h--x-large {
    height: var(--sizes-size-x-large);
  }
  /* dimension-helpers @ md */
  .md\:w--auto {
    width: auto;
  }
  .md\:w--none {
    width: 0;
  }
  .md\:w--full {
    width: 100%;
  }
  .md\:h--auto {
    height: auto;
  }
  .md\:h--none {
    height: 0;
  }
  .md\:h--full {
    height: 100%;
  }
  /* design-margin @ md */
  .md\:m--subtle {
    margin: var(--sizes-size-subtle);
  }
  .md\:m--smallest {
    margin: var(--sizes-size-smallest);
  }
  .md\:m--x-small {
    margin: var(--sizes-size-x-small);
  }
  .md\:m--small {
    margin: var(--sizes-size-small);
  }
  .md\:m--normal {
    margin: var(--sizes-size-normal);
  }
  .md\:m--large {
    margin: var(--sizes-size-large);
  }
  .md\:m--x-large {
    margin: var(--sizes-size-x-large);
  }
  .md\:mt--subtle {
    margin-top: var(--sizes-size-subtle);
  }
  .md\:mt--smallest {
    margin-top: var(--sizes-size-smallest);
  }
  .md\:mt--x-small {
    margin-top: var(--sizes-size-x-small);
  }
  .md\:mt--small {
    margin-top: var(--sizes-size-small);
  }
  .md\:mt--normal {
    margin-top: var(--sizes-size-normal);
  }
  .md\:mt--large {
    margin-top: var(--sizes-size-large);
  }
  .md\:mt--x-large {
    margin-top: var(--sizes-size-x-large);
  }
  .md\:mr--subtle {
    margin-right: var(--sizes-size-subtle);
  }
  .md\:mr--smallest {
    margin-right: var(--sizes-size-smallest);
  }
  .md\:mr--x-small {
    margin-right: var(--sizes-size-x-small);
  }
  .md\:mr--small {
    margin-right: var(--sizes-size-small);
  }
  .md\:mr--normal {
    margin-right: var(--sizes-size-normal);
  }
  .md\:mr--large {
    margin-right: var(--sizes-size-large);
  }
  .md\:mr--x-large {
    margin-right: var(--sizes-size-x-large);
  }
  .md\:mb--subtle {
    margin-bottom: var(--sizes-size-subtle);
  }
  .md\:mb--smallest {
    margin-bottom: var(--sizes-size-smallest);
  }
  .md\:mb--x-small {
    margin-bottom: var(--sizes-size-x-small);
  }
  .md\:mb--small {
    margin-bottom: var(--sizes-size-small);
  }
  .md\:mb--normal {
    margin-bottom: var(--sizes-size-normal);
  }
  .md\:mb--large {
    margin-bottom: var(--sizes-size-large);
  }
  .md\:mb--x-large {
    margin-bottom: var(--sizes-size-x-large);
  }
  .md\:ml--subtle {
    margin-left: var(--sizes-size-subtle);
  }
  .md\:ml--smallest {
    margin-left: var(--sizes-size-smallest);
  }
  .md\:ml--x-small {
    margin-left: var(--sizes-size-x-small);
  }
  .md\:ml--small {
    margin-left: var(--sizes-size-small);
  }
  .md\:ml--normal {
    margin-left: var(--sizes-size-normal);
  }
  .md\:ml--large {
    margin-left: var(--sizes-size-large);
  }
  .md\:ml--x-large {
    margin-left: var(--sizes-size-x-large);
  }
  .md\:mx--subtle {
    margin-left: var(--sizes-size-subtle);
    margin-right: var(--sizes-size-subtle);
  }
  .md\:mx--smallest {
    margin-left: var(--sizes-size-smallest);
    margin-right: var(--sizes-size-smallest);
  }
  .md\:mx--x-small {
    margin-left: var(--sizes-size-x-small);
    margin-right: var(--sizes-size-x-small);
  }
  .md\:mx--small {
    margin-left: var(--sizes-size-small);
    margin-right: var(--sizes-size-small);
  }
  .md\:mx--normal {
    margin-left: var(--sizes-size-normal);
    margin-right: var(--sizes-size-normal);
  }
  .md\:mx--large {
    margin-left: var(--sizes-size-large);
    margin-right: var(--sizes-size-large);
  }
  .md\:mx--x-large {
    margin-left: var(--sizes-size-x-large);
    margin-right: var(--sizes-size-x-large);
  }
  .md\:my--subtle {
    margin-top: var(--sizes-size-subtle);
    margin-bottom: var(--sizes-size-subtle);
  }
  .md\:my--smallest {
    margin-top: var(--sizes-size-smallest);
    margin-bottom: var(--sizes-size-smallest);
  }
  .md\:my--x-small {
    margin-top: var(--sizes-size-x-small);
    margin-bottom: var(--sizes-size-x-small);
  }
  .md\:my--small {
    margin-top: var(--sizes-size-small);
    margin-bottom: var(--sizes-size-small);
  }
  .md\:my--normal {
    margin-top: var(--sizes-size-normal);
    margin-bottom: var(--sizes-size-normal);
  }
  .md\:my--large {
    margin-top: var(--sizes-size-large);
    margin-bottom: var(--sizes-size-large);
  }
  .md\:my--x-large {
    margin-top: var(--sizes-size-x-large);
    margin-bottom: var(--sizes-size-x-large);
  }
  /* margin-helpers @ md */
  .md\:m--auto {
    margin: auto;
  }
  .md\:m--none {
    margin: 0;
  }
  .md\:mt--auto {
    margin-top: auto;
  }
  .md\:mt--none {
    margin-top: 0;
  }
  .md\:mr--auto {
    margin-right: auto;
  }
  .md\:mr--none {
    margin-right: 0;
  }
  .md\:mb--auto {
    margin-bottom: auto;
  }
  .md\:mb--none {
    margin-bottom: 0;
  }
  .md\:ml--auto {
    margin-left: auto;
  }
  .md\:ml--none {
    margin-left: 0;
  }
  .md\:mx--auto {
    margin-left: auto;
    margin-right: auto;
  }
  .md\:mx--none {
    margin-left: 0;
    margin-right: 0;
  }
  .md\:my--auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .md\:my--none {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* design-padding @ md */
  .md\:p--subtle {
    padding: var(--sizes-size-subtle);
  }
  .md\:p--smallest {
    padding: var(--sizes-size-smallest);
  }
  .md\:p--x-small {
    padding: var(--sizes-size-x-small);
  }
  .md\:p--small {
    padding: var(--sizes-size-small);
  }
  .md\:p--normal {
    padding: var(--sizes-size-normal);
  }
  .md\:p--large {
    padding: var(--sizes-size-large);
  }
  .md\:p--x-large {
    padding: var(--sizes-size-x-large);
  }
  .md\:pt--subtle {
    padding-top: var(--sizes-size-subtle);
  }
  .md\:pt--smallest {
    padding-top: var(--sizes-size-smallest);
  }
  .md\:pt--x-small {
    padding-top: var(--sizes-size-x-small);
  }
  .md\:pt--small {
    padding-top: var(--sizes-size-small);
  }
  .md\:pt--normal {
    padding-top: var(--sizes-size-normal);
  }
  .md\:pt--large {
    padding-top: var(--sizes-size-large);
  }
  .md\:pt--x-large {
    padding-top: var(--sizes-size-x-large);
  }
  .md\:pr--subtle {
    padding-right: var(--sizes-size-subtle);
  }
  .md\:pr--smallest {
    padding-right: var(--sizes-size-smallest);
  }
  .md\:pr--x-small {
    padding-right: var(--sizes-size-x-small);
  }
  .md\:pr--small {
    padding-right: var(--sizes-size-small);
  }
  .md\:pr--normal {
    padding-right: var(--sizes-size-normal);
  }
  .md\:pr--large {
    padding-right: var(--sizes-size-large);
  }
  .md\:pr--x-large {
    padding-right: var(--sizes-size-x-large);
  }
  .md\:pb--subtle {
    padding-bottom: var(--sizes-size-subtle);
  }
  .md\:pb--smallest {
    padding-bottom: var(--sizes-size-smallest);
  }
  .md\:pb--x-small {
    padding-bottom: var(--sizes-size-x-small);
  }
  .md\:pb--small {
    padding-bottom: var(--sizes-size-small);
  }
  .md\:pb--normal {
    padding-bottom: var(--sizes-size-normal);
  }
  .md\:pb--large {
    padding-bottom: var(--sizes-size-large);
  }
  .md\:pb--x-large {
    padding-bottom: var(--sizes-size-x-large);
  }
  .md\:pl--subtle {
    padding-left: var(--sizes-size-subtle);
  }
  .md\:pl--smallest {
    padding-left: var(--sizes-size-smallest);
  }
  .md\:pl--x-small {
    padding-left: var(--sizes-size-x-small);
  }
  .md\:pl--small {
    padding-left: var(--sizes-size-small);
  }
  .md\:pl--normal {
    padding-left: var(--sizes-size-normal);
  }
  .md\:pl--large {
    padding-left: var(--sizes-size-large);
  }
  .md\:pl--x-large {
    padding-left: var(--sizes-size-x-large);
  }
  .md\:px--subtle {
    padding-left: var(--sizes-size-subtle);
    padding-right: var(--sizes-size-subtle);
  }
  .md\:px--smallest {
    padding-left: var(--sizes-size-smallest);
    padding-right: var(--sizes-size-smallest);
  }
  .md\:px--x-small {
    padding-left: var(--sizes-size-x-small);
    padding-right: var(--sizes-size-x-small);
  }
  .md\:px--small {
    padding-left: var(--sizes-size-small);
    padding-right: var(--sizes-size-small);
  }
  .md\:px--normal {
    padding-left: var(--sizes-size-normal);
    padding-right: var(--sizes-size-normal);
  }
  .md\:px--large {
    padding-left: var(--sizes-size-large);
    padding-right: var(--sizes-size-large);
  }
  .md\:px--x-large {
    padding-left: var(--sizes-size-x-large);
    padding-right: var(--sizes-size-x-large);
  }
  .md\:py--subtle {
    padding-top: var(--sizes-size-subtle);
    padding-bottom: var(--sizes-size-subtle);
  }
  .md\:py--smallest {
    padding-top: var(--sizes-size-smallest);
    padding-bottom: var(--sizes-size-smallest);
  }
  .md\:py--x-small {
    padding-top: var(--sizes-size-x-small);
    padding-bottom: var(--sizes-size-x-small);
  }
  .md\:py--small {
    padding-top: var(--sizes-size-small);
    padding-bottom: var(--sizes-size-small);
  }
  .md\:py--normal {
    padding-top: var(--sizes-size-normal);
    padding-bottom: var(--sizes-size-normal);
  }
  .md\:py--large {
    padding-top: var(--sizes-size-large);
    padding-bottom: var(--sizes-size-large);
  }
  .md\:py--x-large {
    padding-top: var(--sizes-size-x-large);
    padding-bottom: var(--sizes-size-x-large);
  }
  /* padding-helpers @ md */
  .md\:p--none {
    padding: 0;
  }
  .md\:pt--none {
    padding-top: 0;
  }
  .md\:pr--none {
    padding-right: 0;
  }
  .md\:pb--none {
    padding-bottom: 0;
  }
  .md\:pl--none {
    padding-left: 0;
  }
  .md\:px--none {
    padding-left: 0;
    padding-right: 0;
  }
  .md\:py--none {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* design-padding-box @ md */
  .md\:box--small {
    padding: var(--sizes-padding-small);
  }
  .md\:box--normal {
    padding: var(--sizes-padding-normal);
  }
  .md\:box--large {
    padding: var(--sizes-padding-large);
  }
  /* design-gap @ md */
  .md\:gap--subtle {
    gap: var(--sizes-size-subtle);
  }
  .md\:gap--smallest {
    gap: var(--sizes-size-smallest);
  }
  .md\:gap--x-small {
    gap: var(--sizes-size-x-small);
  }
  .md\:gap--small {
    gap: var(--sizes-size-small);
  }
  .md\:gap--normal {
    gap: var(--sizes-size-normal);
  }
  .md\:gap--large {
    gap: var(--sizes-size-large);
  }
  .md\:gap--x-large {
    gap: var(--sizes-size-x-large);
  }
  .md\:gap-x--subtle {
    -moz-column-gap: var(--sizes-size-subtle);
         column-gap: var(--sizes-size-subtle);
  }
  .md\:gap-x--smallest {
    -moz-column-gap: var(--sizes-size-smallest);
         column-gap: var(--sizes-size-smallest);
  }
  .md\:gap-x--x-small {
    -moz-column-gap: var(--sizes-size-x-small);
         column-gap: var(--sizes-size-x-small);
  }
  .md\:gap-x--small {
    -moz-column-gap: var(--sizes-size-small);
         column-gap: var(--sizes-size-small);
  }
  .md\:gap-x--normal {
    -moz-column-gap: var(--sizes-size-normal);
         column-gap: var(--sizes-size-normal);
  }
  .md\:gap-x--large {
    -moz-column-gap: var(--sizes-size-large);
         column-gap: var(--sizes-size-large);
  }
  .md\:gap-x--x-large {
    -moz-column-gap: var(--sizes-size-x-large);
         column-gap: var(--sizes-size-x-large);
  }
  .md\:gap-y--subtle {
    row-gap: var(--sizes-size-subtle);
  }
  .md\:gap-y--smallest {
    row-gap: var(--sizes-size-smallest);
  }
  .md\:gap-y--x-small {
    row-gap: var(--sizes-size-x-small);
  }
  .md\:gap-y--small {
    row-gap: var(--sizes-size-small);
  }
  .md\:gap-y--normal {
    row-gap: var(--sizes-size-normal);
  }
  .md\:gap-y--large {
    row-gap: var(--sizes-size-large);
  }
  .md\:gap-y--x-large {
    row-gap: var(--sizes-size-x-large);
  }
  /* gap-helpers @ md */
  .md\:gap--none {
    gap: 0;
  }
  .md\:gap-x--none {
    -moz-column-gap: 0;
         column-gap: 0;
  }
  .md\:gap-y--none {
    row-gap: 0;
  }
}
@media (min-width: 1280px) {
  /* display-important @ lg */
  .lg\:none {
    display: none;
  }
  .lg\:none\! {
    display: none !important;
  }
  .lg\:block {
    display: block;
  }
  .lg\:block\! {
    display: block !important;
  }
  .lg\:inline-block {
    display: inline-block;
  }
  .lg\:inline-block\! {
    display: inline-block !important;
  }
  .lg\:inline {
    display: inline;
  }
  .lg\:inline\! {
    display: inline !important;
  }
  /* text @ lg */
  .lg\:text-align--center {
    text-align: center;
  }
  .lg\:text-align--left {
    text-align: left;
  }
  .lg\:text-align--right {
    text-align: right;
  }
  .lg\:text-align--justify {
    text-align: text;
  }
  /* flex-direction @ lg */
  .lg\:direction--row {
    flex-direction: row;
  }
  .lg\:direction--row-reverse {
    flex-direction: row-reverse;
  }
  .lg\:direction--col {
    flex-direction: column;
  }
  .lg\:direction--col-reverse {
    flex-direction: column-reverse;
  }
  /* justify-content @ lg */
  .lg\:justify--start {
    justify-content: flex-start;
  }
  .lg\:justify--end {
    justify-content: flex-end;
  }
  .lg\:justify--center {
    justify-content: center;
  }
  .lg\:justify--between {
    justify-content: space-between;
  }
  .lg\:justify--around {
    justify-content: space-around;
  }
  .lg\:justify--evenly {
    justify-content: space-evenly;
  }
  /* align-items @ lg */
  .lg\:align--stretch {
    align-items: stretch;
  }
  .lg\:align--start {
    align-items: flex-start;
  }
  .lg\:align--center {
    align-items: center;
  }
  .lg\:align--end {
    align-items: flex-end;
  }
  .lg\:align--baseline {
    align-items: baseline;
  }
  /* design-type-size @ lg */
  .lg\:font-size--x-small {
    font-size: var(--type-size-x-small);
  }
  .lg\:font-size--small {
    font-size: var(--type-size-small);
  }
  .lg\:font-size--normal {
    font-size: var(--type-size-normal);
  }
  .lg\:font-size--large {
    font-size: var(--type-size-large);
  }
  .lg\:font-size--x-large {
    font-size: var(--type-size-x-large);
  }
  .lg\:font-size--title-1 {
    font-size: var(--type-size-title-1);
  }
  .lg\:font-size--title-2 {
    font-size: var(--type-size-title-2);
  }
  .lg\:font-size--title-3 {
    font-size: var(--type-size-title-3);
  }
  .lg\:font-size--title-4 {
    font-size: var(--type-size-title-4);
  }
  .lg\:font-size--title-5 {
    font-size: var(--type-size-title-5);
  }
  .lg\:font-size--title-6 {
    font-size: var(--type-size-title-6);
  }
}
@media (min-width: 1440px) {
  /* display-important @ xl */
  .xl\:none {
    display: none;
  }
  .xl\:none\! {
    display: none !important;
  }
  .xl\:block {
    display: block;
  }
  .xl\:block\! {
    display: block !important;
  }
  .xl\:inline-block {
    display: inline-block;
  }
  .xl\:inline-block\! {
    display: inline-block !important;
  }
  .xl\:inline {
    display: inline;
  }
  .xl\:inline\! {
    display: inline !important;
  }
}
/* display-important - media */
@media print {
  .print\:none {
    display: none !important;
  }
  .print\:block {
    display: block !important;
  }
  .print\:inline-block {
    display: inline-block !important;
  }
  .print\:inline {
    display: inline !important;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.flex-grow--1 {
  flex-grow: 1;
}

.flex-grow--0 {
  flex-grow: 0;
}

.flex-shrink--1 {
  flex-shrink: 1;
}

.flex-shrink--0 {
  flex-shrink: 0;
}