/* Client-First layout layer. Components never redefine these responsibilities. */
.page-wrapper,
.main-wrapper,
.section,
[class^="section_"],
[class*=" section_"] { width: 100%; }

.padding-global {
  padding-left: var(--kndsb-page-gutter);
  padding-right: var(--kndsb-page-gutter);
}

.container-large,
.container-medium,
.container-small,
.container-wide {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

.container-large { max-width: var(--kndsb-container-main) !important; }
.container-medium { max-width: 56rem !important; }
.container-small { max-width: var(--kndsb-container-small) !important; }
.container-wide { max-width: var(--kndsb-container-wide) !important; }

.padding-section-small { padding-bottom: var(--kndsb-section-small); padding-top: var(--kndsb-section-small); }
.padding-section-medium { padding-bottom: var(--kndsb-section-medium); padding-top: var(--kndsb-section-medium); }
.padding-section-large { padding-bottom: var(--kndsb-section-large); padding-top: var(--kndsb-section-large); }
.padding-section-none { padding-bottom: 0; padding-top: 0; }

/* Direction modifiers work with every padding-section size. */
.padding-section-small.padding-top-only,
.padding-section-medium.padding-top-only,
.padding-section-large.padding-top-only,
.padding-section-none.padding-top-only { padding-bottom: 0; }

.padding-section-small.padding-bottom-only,
.padding-section-medium.padding-bottom-only,
.padding-section-large.padding-bottom-only,
.padding-section-none.padding-bottom-only { padding-top: 0; }

.alignfull,
.is-full-width {
  box-sizing: border-box;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  width: 100vw !important;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  min-width: 0;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 56.25rem) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 42.5rem) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}