/*
  Wojo Framework 4.0 - Layout Core
  Namespace prefix: .wf-
  Target: modern browsers
*/
:root {
   --wf-max-content-width: 76rem;
   --wf-max-wide-width: 86rem;
   --wf-space-0: 0;
   --wf-space-3xs: .125rem;
   --wf-space-2xs: .25rem;
   --wf-space-1: .25rem;
   --wf-space-2: .5rem;
   --wf-space-xs: .5rem;
   --wf-space-3: .75rem;
   --wf-space-sm: .75rem;
   /* -- fluid starts here (mobile → desktop) */
   --wf-space-md: clamp(0.875rem, 0.78rem + 0.3vw, 1rem);
   /* was 1rem */
   --wf-space-4: clamp(0.875rem, 0.78rem + 0.3vw, 1rem);
   --wf-space-lg: clamp(1.25rem, 1.06rem + 0.6vw, 1.5rem);
   /* was 1.5rem */
   --wf-space-5: clamp(1.25rem, 1.06rem + 0.6vw, 1.5rem);
   --wf-space-xl: clamp(1.5rem, 1.18rem + 1vw, 2rem);
   /* was 2rem */
   --wf-space-6: clamp(1.5rem, 1.18rem + 1vw, 2rem);
   /* 1.5rem on phone, 2rem on desktop */
   --wf-space-2xl: clamp(2rem, 1.36rem + 2vw, 3rem);
   /* was 3rem → 2rem */
   --wf-space-7: clamp(2rem, 1.36rem + 2vw, 3rem);
   /* 2rem → 3rem */
   --wf-space-3xl: clamp(2.5rem, 1.54rem + 3vw, 4rem);
   /* was 4rem → 2.5rem */
   --wf-space-8: clamp(2.5rem, 1.54rem + 3vw, 4rem);
   /* 2.5rem → 4rem */
   --wf-space-4xl: clamp(3.5rem, 1.9rem + 5vw, 6rem);
   /* was 6rem → 3.5rem */
   --wf-space-9: clamp(3rem, 1.72rem + 4vw, 5rem);
   /* 3rem → 5rem */
   --wf-space-10: clamp(3.5rem, 1.9rem + 5vw, 6rem);
   /* 3.5rem → 6rem */
   --wf-space-5xl: clamp(5rem, 3.08rem + 6vw, 8rem);
   /* was 8rem → 5rem */
   --wf-space-11: clamp(4rem, 2.08rem + 6vw, 7rem);
   /* 4rem → 7rem */
   --wf-space-12: clamp(5rem, 3.08rem + 6vw, 8rem);
   /* 5rem → 8rem */
   --wf-radius-1: .125rem;
   --wf-radius-2: .25rem;
   --wf-radius-3: .375rem;
   --wf-radius-4: .5rem;
   --wf-radius-5: .75rem;
   --wf-radius-6: .875rem;
   --wf-radius-7: 1rem;
   --wf-radius-8: 1.25rem;
   --wf-radius-9: 1.5rem;
   --wf-radius-10: 2rem;
   --wf-radius-11: 3rem;
   --wf-radius-12: 4rem;
   --wf-radius-control: var(--wf-radius-4);
   --wf-radius-surface: var(--wf-radius-5);
   --wf-radius-input: var(--wf-radius-6);
   --wf-radius-badge: var(--wf-radius-2);
}
*,
:before,
:after {
   box-sizing: border-box;
}
figure {
   all: unset;
   display: block;
}
.wf-page {
   margin: 0;
}
.wf-container {
   margin-inline-start: auto;
   margin-inline-end: auto;
   width: min(100% - 2rem, var(--wf-max-content-width));
}
.wf-container-wide {
   margin-inline-start: auto;
   margin-inline-end: auto;
   width: min(100% - 2rem, var(--wf-max-wide-width));
}
.wf-container-fluid {
   margin-inline-start: auto;
   margin-inline-end: auto;
   width: calc(100% - 2rem);
}
.wf-section {
   isolation: isolate;
}
.wf-section {
   padding-block-start: max(2rem, min(3vw, 4rem));
   padding-block-end: max(2rem, min(3vw, 4rem));
}
.wf-section-tight {
   padding-block-start: max(1rem, min(2vw, 2rem));
   padding-block-end: max(1rem, min(2vw, 2rem));
}
.wf-grid {
   display: grid;
   gap: var(--wf-gap, var(--wf-space-4));
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.wf-grid-auto {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.wf-grid-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wf-grid-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wf-grid-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wf-grid-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
}
.wf-grid-6 {
   grid-template-columns: repeat(6, minmax(0, 1fr));
}
.wf-grid-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
}
.wf-grid-8 {
   grid-template-columns: repeat(8, minmax(0, 1fr));
}
.wf-grid-12 {
   grid-template-columns: repeat(12, minmax(0, 1fr));
}
.wf-span-full {
   grid-column: 1 / -1;
}
.wf-span-1 {
   grid-column: span 1 / span 1;
}
.wf-span-2 {
   grid-column: span 2 / span 2;
}
.wf-span-3 {
   grid-column: span 3 / span 3;
}
.wf-span-4 {
   grid-column: span 4 / span 4;
}
.wf-span-5 {
   grid-column: span 5 / span 5;
}
.wf-span-6 {
   grid-column: span 6 / span 6;
}
.wf-span-7 {
   grid-column: span 7 / span 7;
}
.wf-span-8 {
   grid-column: span 8 / span 8;
}
.wf-span-9 {
   grid-column: span 9 / span 9;
}
.wf-span-10 {
   grid-column: span 10 / span 10;
}
.wf-span-11 {
   grid-column: span 11 / span 11;
}
.wf-span-12 {
   grid-column: span 12 / span 12;
}
.wf-waterfall {
   column-count: var(--wf-waterfall-cols, 4);
   column-gap: var(--wf-gap, var(--wf-space-4));
}
.wf-waterfall > * {
   width: 100%;
   display: inline-block;
   break-inside: avoid;
   margin-block-end: var(--wf-gap, var(--wf-space-4));
}
.wf-waterfall-2 {
   --wf-waterfall-cols: 2;
}
.wf-waterfall-3 {
   --wf-waterfall-cols: 3;
}
.wf-waterfall-4 {
   --wf-waterfall-cols: 4;
}
.wf-waterfall-5 {
   --wf-waterfall-cols: 5;
}
.wf-waterfall-6 {
   --wf-waterfall-cols: 6;
}
.wf-row {
   display: flex;
   flex-wrap: wrap;
}
.wf-row.wf-gap {
   margin-block-end: var(--wf-gap, var(--wf-space-4));
   gap: var(--wf-gap, var(--wf-space-4));
}
.wf-row.wf-gap-x {
   margin-block-end: 0;
}
.wf-column,
.wf-flex-column {
   flex: 1;
   min-width: 0;
   max-width: 100%;
}
.wf-column-auto {
   flex: 0 0 auto;
   width: auto;
   max-width: none;
}
.wf-stack {
   display: flex;
   flex-direction: column;
}
.wf-cluster {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--wf-gap, var(--wf-space-4));
}
.wf-flank,
.wf-flank-end {
   --wf-flank-size: auto;
   --wf-content-percentage: 50%;
   --wf-flank-gap: var(--wf-space-4);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--wf-flank-gap);
}
/* .wf-flank: first child is the anchor (auto), last child grows */
.wf-flank > :first-child {
   flex: 1 1 var(--wf-flank-size);
}
.wf-flank > :last-child {
   flex: 999 1 0;
   min-width: min(100%, var(--wf-content-percentage));
}
/* .wf-flank-end: last child is the anchor (auto), first child grows */
.wf-flank-end > :last-child {
   flex: 1 1 var(--wf-flank-size);
   min-width: 0;
}
.wf-flank-end > :first-child {
   flex: 999 1 0;
   min-width: min(100%, var(--wf-content-percentage));
}
.wf-sidebar {
   display: grid;
   gap: var(--wf-gap, var(--wf-space-5));
   grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
}
.wf-split {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: var(--wf-gap, var(--wf-space-md));
}
.wf-split > * {
   flex: 0 auto;
   margin: 0;
}
.wf-lattice {
   margin: -1px;
}
.wf-lattice-item {
   border: 1px solid var(--wf-border);
   margin: 0 -1px -1px 0;
}
.wf-center {
   place-items: center;
   display: grid;
}
.wf-items-start {
   align-items: flex-start;
}
.wf-items-center {
   align-items: center;
}
.wf-items-end {
   align-items: flex-end;
}
.wf-items-stretch {
   align-items: stretch;
}
.wf-items-baseline {
   align-items: baseline;
}
.wf-justify-start {
   justify-content: flex-start;
}
.wf-justify-center {
   justify-content: center;
}
.wf-justify-end {
   justify-content: flex-end;
}
.wf-justify-between {
   justify-content: space-between;
}
.wf-justify-around {
   justify-content: space-around;
}
.wf-justify-self-start {
   justify-self: start;
}
.wf-justify-self-end {
   justify-self: end;
}
.wf-justify-self-center {
   justify-self: center;
}
.wf-justify-self-stretch {
   justify-self: stretch;
}
.wf-self-auto {
   align-self: auto;
}
.wf-self-start {
   align-self: flex-start;
}
.wf-self-center {
   align-self: center;
}
.wf-self-end {
   align-self: flex-end;
}
.wf-self-stretch {
   align-self: stretch;
}
.wf-self-baseline {
   align-self: baseline;
}
.wf-gap-3xs {
   --wf-gap: var(--wf-space-3xs);
   gap: var(--wf-gap, var(--wf-space-3xs));
}
.wf-gap-1 {
   --wf-gap: var(--wf-space-1);
   gap: var(--wf-gap, var(--wf-space-1));
}
.wf-gap-2 {
   --wf-gap: var(--wf-space-2);
   gap: var(--wf-gap, var(--wf-space-2));
}
.wf-gap-3 {
   --wf-gap: var(--wf-space-3);
   gap: var(--wf-gap, var(--wf-space-3));
}
.wf-gap-4 {
   --wf-gap: var(--wf-space-4);
   gap: var(--wf-gap, var(--wf-space-4));
}
.wf-gap-5 {
   --wf-gap: var(--wf-space-5);
   gap: var(--wf-gap, var(--wf-space-5));
}
.wf-gap-6 {
   --wf-gap: var(--wf-space-6);
   gap: var(--wf-gap, var(--wf-space-6));
}
.wf-gap-7 {
   --wf-gap: var(--wf-space-7);
   gap: var(--wf-gap, var(--wf-space-7));
}
.wf-gap-8 {
   --wf-gap: var(--wf-space-8);
   gap: var(--wf-gap, var(--wf-space-8));
}
.wf-gap-0 {
   --wf-gap: 0;
   gap: 0;
}
.wf-gap-3xs {
   --wf-gap: var(--wf-space-3xs);
   gap: var(--wf-gap, var(--wf-space-3xs));
}
.wf-gap-2xs {
   --wf-gap: var(--wf-space-2xs);
   gap: var(--wf-gap, var(--wf-space-2xs));
}
.wf-gap-xs {
   --wf-gap: var(--wf-space-xs);
   gap: var(--wf-gap, var(--wf-space-xs));
}
.wf-gap-sm {
   --wf-gap: var(--wf-space-sm);
   gap: var(--wf-gap, var(--wf-space-sm));
}
.wf-gap-md {
   --wf-gap: var(--wf-space-md);
   gap: var(--wf-gap, var(--wf-space-md));
}
.wf-gap-lg {
   --wf-gap: var(--wf-space-lg);
   gap: var(--wf-gap, var(--wf-space-lg));
}
.wf-gap-xl {
   --wf-gap: var(--wf-space-xl);
   gap: var(--wf-gap, var(--wf-space-xl));
}
.wf-gap-2xl {
   --wf-gap: var(--wf-space-2xl);
   gap: var(--wf-gap, var(--wf-space-2xl));
}
.wf-gap-3xl {
   --wf-gap: var(--wf-space-3xl);
   gap: var(--wf-gap, var(--wf-space-3xl));
}
.wf-gap-4xl {
   --wf-gap: var(--wf-space-4xl);
   gap: var(--wf-gap, var(--wf-space-4xl));
}
.wf-gap-5xl {
   --wf-gap: var(--wf-space-5xl);
   gap: var(--wf-gap, var(--wf-space-5xl));
}
/* Bento grid */
.wf-bento {
   --wf-bento-row-min: 6rem;
   display: grid;
   gap: var(--wf-gap, var(--wf-space-4));
   grid-template-columns: repeat(12, minmax(0, 1fr));
   grid-auto-flow: dense;
   grid-auto-rows: minmax(var(--wf-bento-row-min), auto);
   align-items: stretch;
}
/*
Prevent children from overflowing grid tracks
*/
.wf-bento > * {
   min-width: 0;
   min-height: 0;
}
/* Bento Item
------------------------------*/
.wf-bento-item {
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   border-radius: var(--wf-radius-4);
   transform: translateZ(0);
   transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
/* Universal Column Controls
------------------------------*/
.wf-bento-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
}
.wf-bento-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wf-bento-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wf-bento-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wf-bento-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
}
.wf-bento-cols-6 {
   grid-template-columns: repeat(6, minmax(0, 1fr));
}
.wf-bento-cols-8 {
   grid-template-columns: repeat(8, minmax(0, 1fr));
}
.wf-bento-cols-10 {
   grid-template-columns: repeat(10, minmax(0, 1fr));
}
.wf-bento-cols-12 {
   grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* Row Heights
------------------------------*/
.wf-bento-row-xs {
   --wf-bento-row-min: 3.5rem;
}
.wf-bento-row-sm {
   --wf-bento-row-min: 4.5rem;
}
.wf-bento-row-md {
   --wf-bento-row-min: 5.5rem;
}
.wf-bento-row-lg {
   --wf-bento-row-min: 7rem;
}
.wf-bento-row-xl {
   --wf-bento-row-min: 9rem;
}
.wf-bento-row-2xl {
   --wf-bento-row-min: 12rem;
}
/* Column Span Utilities
------------------------------*/
.wf-bento-col-1 {
   grid-column: span 1;
}
.wf-bento-col-2 {
   grid-column: span 2;
}
.wf-bento-col-3 {
   grid-column: span 3;
}
.wf-bento-col-4 {
   grid-column: span 4;
}
.wf-bento-col-5 {
   grid-column: span 5;
}
.wf-bento-col-6 {
   grid-column: span 6;
}
.wf-bento-col-7 {
   grid-column: span 7;
}
.wf-bento-col-8 {
   grid-column: span 8;
}
.wf-bento-col-9 {
   grid-column: span 9;
}
.wf-bento-col-10 {
   grid-column: span 10;
}
.wf-bento-col-11 {
   grid-column: span 11;
}
.wf-bento-col-12 {
   grid-column: span 12;
}
/* Row Span Utilities
------------------------------*/
.wf-bento-row-1 {
   grid-row: span 1;
}
.wf-bento-row-2 {
   grid-row: span 2;
}
.wf-bento-row-3 {
   grid-row: span 3;
}
.wf-bento-row-4 {
   grid-row: span 4;
}
.wf-bento-row-5 {
   grid-row: span 5;
}
.wf-bento-row-6 {
   grid-row: span 6;
}
/* Screen breakpoints start at 30rem (480px) to target small devices. */
@media (max-width: 41.999rem) {
   :root {
      --wf-space-xl: 1.5rem;
      --wf-space-2xl: 2rem;
      --wf-space-3xl: 3rem;
      --wf-space-4xl: 4rem;
      --wf-space-5xl: 5rem;
      --wf-space-6: 1.5rem;
      --wf-space-7: 2rem;
      --wf-space-8: 2.5rem;
      --wf-space-9: 3rem;
      --wf-space-10: 3.5rem;
      --wf-space-11: 4rem;
      --wf-space-12: 5rem;
   }
   .wf-row .wf-column.wf-phone-10,
   .wf-row .wf-column {
      flex: 0 0 100%;
      max-width: 100%;
   }
   .wf-row .wf-column.wf-phone-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
   }
   .wf-phone-flank-end > :last-child {
      flex: 1 1 var(--wf-flank-size);
      min-width: 0;
   }
   .wf-phone-flank-end > :first-child {
      flex: 999 1 0;
      min-width: min(100%, var(--wf-content-percentage));
   }
   .wf-phone-order-1,
   .wf-mobile-order-1 {
      order: 1;
   }
   .wf-phone-order-2,
   .wf-mobile-order-2 {
      order: 2;
   }
   .wf-phone-order-3,
   .wf-mobile-order-3 {
      order: 3;
   }
   .wf-phone-order-4,
   .wf-mobile-order-4 {
      order: 4;
   }
   .wf-phone-order-5,
   .wf-mobile-order-5 {
      order: 5;
   }
   .wf-grid-2,
   .wf-grid-3,
   .wf-grid-4,
   .wf-grid-5,
   .wf-grid-6,
   .wf-grid-7 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }
   .wf-grid-8,
   .wf-grid-9,
   .wf-grid-10 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .wf-phone-gap-0 {
      gap: 0;
   }
   .wf-phone-gap-3xs {
      gap: var(--wf-gap, var(--wf-space-3xs));
   }
   .wf-phone-gap-2xs {
      gap: var(--wf-gap, var(--wf-space-2xs));
   }
   .wf-phone-gap-xs {
      gap: var(--wf-gap, var(--wf-space-xs));
   }
   .wf-phone-gap-sm {
      gap: var(--wf-gap, var(--wf-space-sm));
   }
   .wf-phone-gap-md {
      gap: var(--wf-gap, var(--wf-space-md));
   }
   .wf-phone-gap-lg {
      gap: var(--wf-gap, var(--wf-space-lg));
   }
   .wf-phone-gap-xl {
      gap: var(--wf-gap, var(--wf-space-xl));
   }
   .wf-phone-gap-2xl {
      gap: var(--wf-gap, var(--wf-space-2xl));
   }
   .wf-phone-gap-3xl {
      gap: var(--wf-gap, var(--wf-space-3xl));
   }
   .wf-phone-gap-4xl {
      gap: var(--wf-gap, var(--wf-space-4xl));
   }
   .wf-phone-gap-5xl {
      gap: var(--wf-gap, var(--wf-space-5xl));
   }
   .wf-phone-stack {
      display: flex;
      flex-direction: column;
   }
   .wf-mobile-grid-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }
   .wf-phone-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .wf-phone-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .wf-phone-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   .wf-phone-grid-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }
   .wf-phone-grid-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }
   .wf-span-1,
   .wf-span-2,
   .wf-span-3,
   .wf-span-4,
   .wf-span-5,
   .wf-span-6,
   .wf-span-7,
   .wf-span-8,
   .wf-span-9,
   .wf-span-10,
   .wf-span-11,
   .wf-span-12 {
      grid-column: 1 / -1;
   }
   .wf-bento {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }
   .wf-bento-item {
      grid-column: span 1;
      grid-row: span 1;
      min-height: auto;
   }
   .wf-waterfall {
      --wf-waterfall-cols: 1;
   }
   .wf-img-square,
   .wf-img-video,
   .wf-img-wide,
   .wf-img-classic,
   .wf-img-photo,
   .wf-img-portrait,
   .wf-img-tall,
   .wf-img-taller {
      aspect-ratio: auto;
   }
}
/* Screen breakpoints start at 42rem (672px) to target larger phones and smaller tablets. */
@media (min-width: 42rem) and (max-width: 61.999rem) {
   :root {
      --wf-space-xl: 1.5rem;
      --wf-space-2xl: 2rem;
      --wf-space-3xl: 3rem;
      --wf-space-4xl: 4rem;
      --wf-space-5xl: 5rem;
      --wf-space-6: 1.5rem;
      --wf-space-7: 2rem;
      --wf-space-8: 2.5rem;
      --wf-space-9: 3rem;
      --wf-space-10: 3.5rem;
      --wf-space-11: 4rem;
      --wf-space-12: 5rem;
   }
   .wf-row .wf-column.wf-mobile-10,
   .wf-row .wf-column:not(.wf-column-auto) {
      flex: 0 0 100%;
      max-width: 100%;
   }
   .wf-row .wf-column.wf-mobile-9 {
      flex: 90 1 0;
      max-width: 90%;
   }
   .wf-row .wf-column.wf-mobile-8 {
      flex: 80 1 0;
      max-width: 80%;
   }
   .wf-row .wf-column.wf-mobile-75 {
      flex: 75 1 0;
      max-width: 75%;
   }
   .wf-row .wf-column.wf-mobile-7 {
      flex: 70 1 0;
      max-width: 70%;
   }
   .wf-row .wf-column.wf-mobile-6 {
      flex: 60 1 0;
      max-width: 60%;
   }
   .wf-row .wf-column.wf-mobile-5 {
      flex: 50 1 0;
      max-width: 50%;
   }
   .wf-row .wf-column.wf-mobile-4 {
      flex: 40 1 0;
      max-width: 40%;
   }
   .wf-row .wf-column.wf-mobile-3 {
      flex: 30 1 0;
      max-width: 30%;
   }
   .wf-row .wf-column.wf-mobile-25 {
      flex: 25 1 0;
      max-width: 25%;
   }
   .wf-row .wf-column.wf-mobile-2 {
      flex: 20 1 0;
      max-width: 20%;
   }
   .wf-row .wf-column.wf-mobile-1 {
      flex: 10 1 0;
      max-width: 10%;
   }
   .wf-row .wf-column.wf-mobile-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
   }
   .wf-mobile-grid-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }
   .wf-mobile-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .wf-mobile-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .wf-mobile-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   .wf-mobile-grid-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }
   .wf-mobile-grid-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }
   .wf-mobile-grid-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }
   .wf-mobile-grid-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
   }
   .wf-mobile-span-1 {
      grid-column: span 1 / span 1;
   }
   .wf-mobile-span-2 {
      grid-column: span 2 / span 2;
   }
   .wf-mobile-span-3 {
      grid-column: span 3 / span 3;
   }
   .wf-mobile-span-4 {
      grid-column: span 4 / span 4;
   }
   .wf-mobile-span-5 {
      grid-column: span 5 / span 5;
   }
   .wf-mobile-span-6 {
      grid-column: span 6 / span 6;
   }
   .wf-mobile-span-7 {
      grid-column: span 7 / span 7;
   }
   .wf-mobile-span-8 {
      grid-column: span 8 / span 8;
   }
   .wf-mobile-span-9 {
      grid-column: span 9 / span 9;
   }
   .wf-mobile-span-10 {
      grid-column: span 10 / span 10;
   }
   .wf-mobile-span-11 {
      grid-column: span 11 / span 11;
   }
   .wf-mobile-span-12 {
      grid-column: span 12 / span 12;
   }
   .wf-mobile-gap-0 {
      gap: 0;
   }
   .wf-mobile-gap-3xs {
      gap: var(--wf-gap, var(--wf-space-3xs));
   }
   .wf-mobile-gap-2xs {
      gap: var(--wf-gap, var(--wf-space-2xs));
   }
   .wf-mobile-gap-xs {
      gap: var(--wf-gap, var(--wf-space-xs));
   }
   .wf-mobile-gap-sm {
      gap: var(--wf-gap, var(--wf-space-sm));
   }
   .wf-mobile-gap-md {
      gap: var(--wf-gap, var(--wf-space-md));
   }
   .wf-mobile-gap-lg {
      gap: var(--wf-gap, var(--wf-space-lg));
   }
   .wf-mobile-gap-xl {
      gap: var(--wf-gap, var(--wf-space-xl));
   }
   .wf-mobile-gap-2xl {
      gap: var(--wf-gap, var(--wf-space-2xl));
   }
   .wf-mobile-gap-3xl {
      gap: var(--wf-gap, var(--wf-space-3xl));
   }
   .wf-mobile-gap-4xl {
      gap: var(--wf-gap, var(--wf-space-4xl));
   }
   .wf-mobile-gap-5xl {
      gap: var(--wf-gap, var(--wf-space-5xl));
   }
   .wf-mobile-order-1 {
      order: 1;
   }
   .wf-mobile-order-2 {
      order: 2;
   }
   .wf-mobile-order-3 {
      order: 3;
   }
   .wf-mobile-order-4 {
      order: 4;
   }
   .wf-mobile-order-5 {
      order: 5;
   }
   .wf-mobile-flank-end > :last-child {
      flex: 1 1 var(--wf-flank-size);
      min-width: 0;
   }
   .wf-mobile-flank-end > :first-child {
      flex: 999 1 0;
      min-width: min(100%, var(--wf-content-percentage));
   }
   .wf-bento {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }
   .wf-waterfall {
      --wf-waterfall-cols: 2;
   }
   .wf-img-square,
   .wf-img-video,
   .wf-img-wide,
   .wf-img-classic,
   .wf-img-photo,
   .wf-img-portrait,
   .wf-img-tall,
   .wf-img-taller {
      aspect-ratio: auto;
   }
   .wf-bento-col-7,
   .wf-bento-col-8,
   .wf-bento-col-9,
   .wf-bento-col-10,
   .wf-bento-col-11,
   .wf-bento-col-12 {
      grid-column: span 6;
   }
   .wf-bento-col-4 {
      grid-column: span 3;
   }
}
/* Screen breakpoints start at 62rem (992px) to target tablets and smaller laptops. */
@media (min-width: 62rem) and (max-width: 79.999rem) {
   .wf-row .wf-column.wf-tablet-10 {
      flex: 0 0 100%;
      max-width: 100%;
   }
   .wf-row .wf-column.wf-tablet-9 {
      flex: 90 1 0;
      max-width: 90%;
   }
   .wf-row .wf-column.wf-tablet-8 {
      flex: 80 1 0;
      max-width: 80%;
   }
   .wf-row .wf-column.wf-tablet-75 {
      flex: 75 1 0;
      max-width: 75%;
   }
   .wf-row .wf-column.wf-tablet-7 {
      flex: 70 1 0;
      max-width: 70%;
   }
   .wf-row .wf-column.wf-tablet-6 {
      flex: 60 1 0;
      max-width: 60%;
   }
   .wf-row .wf-column.wf-tablet-5 {
      flex: 50 1 0;
      max-width: 50%;
   }
   .wf-row .wf-column.wf-tablet-4 {
      flex: 40 1 0;
      max-width: 40%;
   }
   .wf-row .wf-column.wf-tablet-3 {
      flex: 30 1 0;
      max-width: 30%;
   }
   .wf-row .wf-column.wf-tablet-25 {
      flex: 25 1 0;
      max-width: 25%;
   }
   .wf-row .wf-column.wf-tablet-2 {
      flex: 20 1 0;
      max-width: 20%;
   }
   .wf-row .wf-column.wf-tablet-1 {
      flex: 10 1 0;
      max-width: 10%;
   }
   .wf-tablet-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .wf-tablet-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .wf-tablet-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   .wf-tablet-grid-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }
   .wf-tablet-grid-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }
   .wf-tablet-grid-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }
   .wf-tablet-grid-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
   }
   .wf-tablet-span-full {
      grid-column: 1 / -1;
   }
   .wf-tablet-span-1 {
      grid-column: span 1 / span 1;
   }
   .wf-tablet-span-2 {
      grid-column: span 2 / span 2;
   }
   .wf-tablet-span-3 {
      grid-column: span 3 / span 3;
   }
   .wf-tablet-span-4 {
      grid-column: span 4 / span 4;
   }
   .wf-tablet-span-5 {
      grid-column: span 5 / span 5;
   }
   .wf-tablet-span-6 {
      grid-column: span 6 / span 6;
   }
   .wf-tablet-span-7 {
      grid-column: span 7 / span 7;
   }
   .wf-tablet-span-8 {
      grid-column: span 8 / span 8;
   }
   .wf-tablet-span-9 {
      grid-column: span 9 / span 9;
   }
   .wf-tablet-span-10 {
      grid-column: span 10 / span 10;
   }
   .wf-tablet-span-11 {
      grid-column: span 11 / span 11;
   }
   .wf-tablet-span-12 {
      grid-column: span 12 / span 12;
   }
   .wf-tablet-gap-0 {
      gap: 0;
   }
   .wf-tablet-gap-3xs {
      gap: var(--wf-gap, var(--wf-space-3xs));
   }
   .wf-tablet-gap-2xs {
      gap: var(--wf-gap, var(--wf-space-2xs));
   }
   .wf-tablet-gap-xs {
      gap: var(--wf-gap, var(--wf-space-xs));
   }
   .wf-tablet-gap-sm {
      gap: var(--wf-gap, var(--wf-space-sm));
   }
   .wf-tablet-gap-md {
      gap: var(--wf-gap, var(--wf-space-md));
   }
   .wf-tablet-gap-lg {
      gap: var(--wf-gap, var(--wf-space-lg));
   }
   .wf-tablet-gap-xl {
      gap: var(--wf-gap, var(--wf-space-xl));
   }
   .wf-tablet-gap-2xl {
      gap: var(--wf-gap, var(--wf-space-2xl));
   }
   .wf-tablet-gap-3xl {
      gap: var(--wf-gap, var(--wf-space-3xl));
   }
   .wf-tablet-gap-4xl {
      gap: var(--wf-gap, var(--wf-space-4xl));
   }
   .wf-tablet-gap-5xl {
      gap: var(--wf-gap, var(--wf-space-5xl));
   }
   .wf-tablet-order-1 {
      order: 1;
   }
   .wf-tablet-order-2 {
      order: 2;
   }
   .wf-tablet-order-3 {
      order: 3;
   }
   .wf-tablet-order-4 {
      order: 4;
   }
   .wf-tablet-order-5 {
      order: 5;
   }
   .wf-tablet-flank-end > :last-child {
      flex: 1 1 var(--wf-flank-size);
      min-width: 0;
   }
   .wf-tablet-flank-end > :first-child {
      flex: 999 1 0;
      min-width: min(100%, var(--wf-content-percentage));
   }
}
/* Screen breakpoints start at 80rem (1280px) to target larger desktops and wide screens. */
@media (min-width: 80rem) {
   .wf-row .wf-column.wf-screen-10 {
      flex: 100 1 0;
      max-width: 100%;
   }
   .wf-row .wf-column.wf-screen-9 {
      flex: 90 1 0;
      max-width: 90%;
   }
   .wf-row .wf-column.wf-screen-8 {
      flex: 80 1 0;
      max-width: 80%;
   }
   .wf-row .wf-column.wf-screen-75 {
      flex: 75 1 0;
      max-width: 75%;
   }
   .wf-row .wf-column.wf-screen-7 {
      flex: 70 1 0;
      max-width: 70%;
   }
   .wf-row .wf-column.wf-screen-65 {
      flex: 65 1 0;
      max-width: 65%;
   }
   .wf-row .wf-column.wf-screen-6 {
      flex: 60 1 0;
      max-width: 60%;
   }
   .wf-row .wf-column.wf-screen-5 {
      flex: 50 1 0;
      max-width: 50%;
   }
   .wf-row .wf-column.wf-screen-45 {
      flex: 45 1 0;
      max-width: 45%;
   }
   .wf-row .wf-column.wf-screen-4 {
      flex: 40 1 0;
      max-width: 40%;
   }
   .wf-row .wf-column.wf-screen-35 {
      flex: 35 1 0;
      max-width: 35%;
   }
   .wf-row .wf-column.wf-screen-3 {
      flex: 30 1 0;
      max-width: 30%;
   }
   .wf-row .wf-column.wf-screen-25 {
      flex: 25 1 0;
      max-width: 25%;
   }
   .wf-row .wf-column.wf-screen-2 {
      flex: 20 1 0;
      max-width: 20%;
   }
   .wf-row .wf-column.wf-screen-1 {
      flex: 10 1 0;
      max-width: 10%;
   }
   .wf-screen-span-full {
      grid-column: 1 / -1;
   }
   .wf-screen-span-1 {
      grid-column: span 1 / span 1;
   }
   .wf-screen-span-2 {
      grid-column: span 2 / span 2;
   }
   .wf-screen-span-3 {
      grid-column: span 3 / span 3;
   }
   .wf-screen-span-4 {
      grid-column: span 4 / span 4;
   }
   .wf-screen-span-5 {
      grid-column: span 5 / span 5;
   }
   .wf-screen-span-6 {
      grid-column: span 6 / span 6;
   }
   .wf-screen-span-7 {
      grid-column: span 7 / span 7;
   }
   .wf-screen-span-8 {
      grid-column: span 8 / span 8;
   }
   .wf-screen-span-9 {
      grid-column: span 9 / span 9;
   }
   .wf-screen-span-10 {
      grid-column: span 10 / span 10;
   }
   .wf-screen-span-11 {
      grid-column: span 11 / span 11;
   }
   .wf-screen-span-12 {
      grid-column: span 12 / span 12;
   }
   .wf-screen-gap-3xs {
      gap: var(--wf-gap, var(--wf-space-3xs));
   }
   .wf-screen-gap-2xs {
      gap: var(--wf-gap, var(--wf-space-2xs));
   }
   .wf-screen-gap-xs {
      gap: var(--wf-gap, var(--wf-space-xs));
   }
   .wf-screen-gap-sm {
      gap: var(--wf-gap, var(--wf-space-sm));
   }
   .wf-screen-gap-md {
      gap: var(--wf-gap, var(--wf-space-md));
   }
   .wf-screen-gap-lg {
      gap: var(--wf-gap, var(--wf-space-lg));
   }
   .wf-screen-gap-xl {
      gap: var(--wf-gap, var(--wf-space-xl));
   }
   .wf-screen-gap-2xl {
      gap: var(--wf-gap, var(--wf-space-2xl));
   }
   .wf-screen-gap-3xl {
      gap: var(--wf-gap, var(--wf-space-3xl));
   }
   .wf-screen-gap-4xl {
      gap: var(--wf-gap, var(--wf-space-4xl));
   }
   .wf-screen-gap-5xl {
      gap: var(--wf-gap, var(--wf-space-5xl));
   }
   .wf-screen-order-1 {
      order: 1;
   }
   .wf-screen-order-2 {
      order: 2;
   }
   .wf-screen-order-3 {
      order: 3;
   }
   .wf-screen-order-4 {
      order: 4;
   }
   .wf-screen-order-5 {
      order: 5;
   }
   .wf-screen-flank-end > :last-child {
      flex: 1 1 var(--wf-flank-size);
      min-width: 0;
   }
   .wf-screen-flank-end > :first-child {
      flex: 999 1 0;
      min-width: min(100%, var(--wf-content-percentage));
   }
}