/*
 * Netbiis Grid & Responsive Utilities System
 * Complete Grid CSS and responsive utilities system
 * Compatible with Adobe Edge Delivery Services
 *
 * Documentation:
 * - Index: docs/INDEX.md
 * - Complete Guide: docs/GRID_RESPONSIVE_GUIDE.md
 * - Cheat Sheet: docs/GRID_CHEAT_SHEET.md
 * - SASS Guide: docs/SASS_GENERIC_GUIDE.md
 */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  box-sizing: border-box;
}

.container-fluid {
  width: 100%;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  box-sizing: border-box;
}

.container-sm {
  width: 100%;
  max-width: var(--container-sm);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  box-sizing: border-box;
}

.container-md {
  width: 100%;
  max-width: var(--container-md);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  box-sizing: border-box;
}

.container-lg {
  width: 100%;
  max-width: var(--container-lg);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  box-sizing: border-box;
}

.container-xl {
  width: 100%;
  max-width: var(--container-xl);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  box-sizing: border-box;
}

.container-xxl {
  width: 100%;
  max-width: var(--container-xxl);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  box-sizing: border-box;
}

@media (width >= 640px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (width >= 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (width >= 1024px) {
  .container {
    max-width: var(--container-lg);
  }

  .container,
  .container-fluid {
    padding-right: var(--spacing-lg);
    padding-left: var(--spacing-lg);
  }

  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-right: var(--spacing-lg);
    padding-left: var(--spacing-lg);
  }
}

@media (width >= 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (width >= 1440px) {
  .container {
    max-width: var(--container-xxl);
  }
}

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

.grid-auto {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-fill {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

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

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

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

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

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

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

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

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

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

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

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

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

.row-1 {
  grid-row: span 1;
}

.row-2 {
  grid-row: span 2;
}

.row-3 {
  grid-row: span 3;
}

.row-4 {
  grid-row: span 4;
}

.row-5 {
  grid-row: span 5;
}

.row-6 {
  grid-row: span 6;
}

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

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

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

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

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

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

.grid-rows-1 {
  grid-template-rows: repeat(1, 1fr);
}

.grid-rows-2 {
  grid-template-rows: repeat(2, 1fr);
}

.grid-rows-3 {
  grid-template-rows: repeat(3, 1fr);
}

.grid-rows-4 {
  grid-template-rows: repeat(4, 1fr);
}

.grid-rows-5 {
  grid-template-rows: repeat(5, 1fr);
}

.grid-rows-6 {
  grid-template-rows: repeat(6, 1fr);
}

.flex {
  display: flex;
}

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

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

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

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

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

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

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

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

.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;
}

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

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

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

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

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

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

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

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

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

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

.content-stretch {
  align-content: stretch;
}

.self-auto {
  align-self: auto;
}

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

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

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

.self-stretch {
  align-self: stretch;
}

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

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

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.grow {
  flex-grow: 1;
}

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

.shrink {
  flex-shrink: 1;
}

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

.m-xs {
  margin: var(--spacing-xs);
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.mx-xs {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.mx-sm {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.mx-md {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}

.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.mx-lg {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}

.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.mx-xl {
  margin-left: var(--spacing-xl);
  margin-right: var(--spacing-xl);
}

.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.m-xxl {
  margin: var(--spacing-xxl);
}

.mt-xxl {
  margin-top: var(--spacing-xxl);
}

.mr-xxl {
  margin-right: var(--spacing-xxl);
}

.mb-xxl {
  margin-bottom: var(--spacing-xxl);
}

.ml-xxl {
  margin-left: var(--spacing-xxl);
}

.mx-xxl {
  margin-left: var(--spacing-xxl);
  margin-right: var(--spacing-xxl);
}

.my-xxl {
  margin-top: var(--spacing-xxl);
  margin-bottom: var(--spacing-xxl);
}

.m-xxxl {
  margin: var(--spacing-xxxl);
}

.mt-xxxl {
  margin-top: var(--spacing-xxxl);
}

.mr-xxxl {
  margin-right: var(--spacing-xxxl);
}

.mb-xxxl {
  margin-bottom: var(--spacing-xxxl);
}

.ml-xxxl {
  margin-left: var(--spacing-xxxl);
}

.mx-xxxl {
  margin-left: var(--spacing-xxxl);
  margin-right: var(--spacing-xxxl);
}

.my-xxxl {
  margin-top: var(--spacing-xxxl);
  margin-bottom: var(--spacing-xxxl);
}

.p-xs {
  padding: var(--spacing-xs);
}

.pt-xs {
  padding-top: var(--spacing-xs);
}

.pr-xs {
  padding-right: var(--spacing-xs);
}

.pb-xs {
  padding-bottom: var(--spacing-xs);
}

.pl-xs {
  padding-left: var(--spacing-xs);
}

.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.pt-sm {
  padding-top: var(--spacing-sm);
}

.pr-sm {
  padding-right: var(--spacing-sm);
}

.pb-sm {
  padding-bottom: var(--spacing-sm);
}

.pl-sm {
  padding-left: var(--spacing-sm);
}

.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.pt-md {
  padding-top: var(--spacing-md);
}

.pr-md {
  padding-right: var(--spacing-md);
}

.pb-md {
  padding-bottom: var(--spacing-md);
}

.pl-md {
  padding-left: var(--spacing-md);
}

.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.pt-lg {
  padding-top: var(--spacing-lg);
}

.pr-lg {
  padding-right: var(--spacing-lg);
}

.pb-lg {
  padding-bottom: var(--spacing-lg);
}

.pl-lg {
  padding-left: var(--spacing-lg);
}

.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.pt-xl {
  padding-top: var(--spacing-xl);
}

.pr-xl {
  padding-right: var(--spacing-xl);
}

.pb-xl {
  padding-bottom: var(--spacing-xl);
}

.pl-xl {
  padding-left: var(--spacing-xl);
}

.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.p-xxl {
  padding: var(--spacing-xxl);
}

.pt-xxl {
  padding-top: var(--spacing-xxl);
}

.pr-xxl {
  padding-right: var(--spacing-xxl);
}

.pb-xxl {
  padding-bottom: var(--spacing-xxl);
}

.pl-xxl {
  padding-left: var(--spacing-xxl);
}

.px-xxl {
  padding-left: var(--spacing-xxl);
  padding-right: var(--spacing-xxl);
}

.py-xxl {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}

.p-xxxl {
  padding: var(--spacing-xxxl);
}

.pt-xxxl {
  padding-top: var(--spacing-xxxl);
}

.pr-xxxl {
  padding-right: var(--spacing-xxxl);
}

.pb-xxxl {
  padding-bottom: var(--spacing-xxxl);
}

.pl-xxxl {
  padding-left: var(--spacing-xxxl);
}

.px-xxxl {
  padding-left: var(--spacing-xxxl);
  padding-right: var(--spacing-xxxl);
}

.py-xxxl {
  padding-top: var(--spacing-xxxl);
  padding-bottom: var(--spacing-xxxl);
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-x-xs {
  column-gap: var(--spacing-xs);
}

.gap-y-xs {
  row-gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-x-sm {
  column-gap: var(--spacing-sm);
}

.gap-y-sm {
  row-gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-x-md {
  column-gap: var(--spacing-md);
}

.gap-y-md {
  row-gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-x-lg {
  column-gap: var(--spacing-lg);
}

.gap-y-lg {
  row-gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.gap-x-xl {
  column-gap: var(--spacing-xl);
}

.gap-y-xl {
  row-gap: var(--spacing-xl);
}

.gap-xxl {
  gap: var(--spacing-xxl);
}

.gap-x-xxl {
  column-gap: var(--spacing-xxl);
}

.gap-y-xxl {
  row-gap: var(--spacing-xxl);
}

.gap-xxxl {
  gap: var(--spacing-xxxl);
}

.gap-x-xxxl {
  column-gap: var(--spacing-xxxl);
}

.gap-y-xxxl {
  row-gap: var(--spacing-xxxl);
}

.m-auto {
  margin: auto;
}

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

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

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

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

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

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

.m-0 {
  margin: 0;
}

.p-0 {
  padding: 0;
}

.gap-0 {
  gap: 0;
}

@media (width >= 640px) {
  .sm\:col-1 {
    grid-column: span 1;
  }

  .sm\:col-2 {
    grid-column: span 2;
  }

  .sm\:col-3 {
    grid-column: span 3;
  }

  .sm\:col-4 {
    grid-column: span 4;
  }

  .sm\:col-5 {
    grid-column: span 5;
  }

  .sm\:col-6 {
    grid-column: span 6;
  }

  .sm\:col-7 {
    grid-column: span 7;
  }

  .sm\:col-8 {
    grid-column: span 8;
  }

  .sm\:col-9 {
    grid-column: span 9;
  }

  .sm\:col-10 {
    grid-column: span 10;
  }

  .sm\:col-11 {
    grid-column: span 11;
  }

  .sm\:col-12 {
    grid-column: span 12;
  }

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

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

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

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

  .sm\:flex {
    display: flex;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

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

  .sm\:justify-start {
    justify-content: flex-start;
  }

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

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

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

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

@media (width >= 768px) {
  .md\:col-1 {
    grid-column: span 1;
  }

  .md\:col-2 {
    grid-column: span 2;
  }

  .md\:col-3 {
    grid-column: span 3;
  }

  .md\:col-4 {
    grid-column: span 4;
  }

  .md\:col-5 {
    grid-column: span 5;
  }

  .md\:col-6 {
    grid-column: span 6;
  }

  .md\:col-7 {
    grid-column: span 7;
  }

  .md\:col-8 {
    grid-column: span 8;
  }

  .md\:col-9 {
    grid-column: span 9;
  }

  .md\:col-10 {
    grid-column: span 10;
  }

  .md\:col-11 {
    grid-column: span 11;
  }

  .md\:col-12 {
    grid-column: span 12;
  }

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

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

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

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

  .md\:flex {
    display: flex;
  }

  .md\:flex-row {
    flex-direction: row;
  }

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

  .md\:justify-start {
    justify-content: flex-start;
  }

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

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

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

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

@media (width >= 1024px) {
  .lg\:col-1 {
    grid-column: span 1;
  }

  .lg\:col-2 {
    grid-column: span 2;
  }

  .lg\:col-3 {
    grid-column: span 3;
  }

  .lg\:col-4 {
    grid-column: span 4;
  }

  .lg\:col-5 {
    grid-column: span 5;
  }

  .lg\:col-6 {
    grid-column: span 6;
  }

  .lg\:col-7 {
    grid-column: span 7;
  }

  .lg\:col-8 {
    grid-column: span 8;
  }

  .lg\:col-9 {
    grid-column: span 9;
  }

  .lg\:col-10 {
    grid-column: span 10;
  }

  .lg\:col-11 {
    grid-column: span 11;
  }

  .lg\:col-12 {
    grid-column: span 12;
  }

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

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

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

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

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

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

  .lg\:flex {
    display: flex;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

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

  .lg\:justify-start {
    justify-content: flex-start;
  }

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

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

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

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

@media (width >= 1280px) {
  .xl\:col-1 {
    grid-column: span 1;
  }

  .xl\:col-2 {
    grid-column: span 2;
  }

  .xl\:col-3 {
    grid-column: span 3;
  }

  .xl\:col-4 {
    grid-column: span 4;
  }

  .xl\:col-5 {
    grid-column: span 5;
  }

  .xl\:col-6 {
    grid-column: span 6;
  }

  .xl\:col-7 {
    grid-column: span 7;
  }

  .xl\:col-8 {
    grid-column: span 8;
  }

  .xl\:col-9 {
    grid-column: span 9;
  }

  .xl\:col-10 {
    grid-column: span 10;
  }

  .xl\:col-11 {
    grid-column: span 11;
  }

  .xl\:col-12 {
    grid-column: span 12;
  }

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

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

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

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

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

  .xl\:flex {
    display: flex;
  }

  .xl\:flex-row {
    flex-direction: row;
  }

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

  .xl\:justify-start {
    justify-content: flex-start;
  }

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

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

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

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

:root {
  /* breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1440px;

  /* spacing scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;

  /* container max-widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 976px;
  --container-xl: 1232px;
  --container-xxl: 1424px;

  /* grid */
  --grid-columns: 12;
  --grid-gap: var(--spacing-md);

  /* footer */
  --footer-card-radius: 24px;
  --footer-card-shadow: 0 4px 24px hsl(0deg 0% 0% / 8%);

  /* footer — mobile (< 768px) */
  --footer-outer-padding-mobile: 16px;
  --footer-card-padding-mobile: 32px 16px;
  --footer-card-gap-mobile: 24px;

  /* footer — tablet (768px – 1023px) */
  --footer-outer-padding-tablet: 16px 32px 32px;
  --footer-card-padding-tablet: 40px 48px;
  --footer-card-row-gap-tablet: 40px;

  /* footer — desktop (>= 1024px) */
  --footer-outer-padding-desktop: 16px 32px 16px;
  --footer-card-padding-desktop: 20px 40px;
  --footer-card-gap-desktop: 24px;
  --footer-outer-padding-xl: 24px 40px 20px;
  --footer-card-padding-xl: 24px 48px;
}