@charset "UTF-8";
.flex-col {
  display: flex;
  flex-direction: column;
}

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

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-between-start {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.flex-between-end {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.h-xl {
  height: var(--height-xl);
}

.h-lg {
  height: var(--height-lg);
}

.h-md {
  height: var(--height-md);
}

.h-md-min {
  min-height: var(--height-md);
}

.h-sm {
  height: var(--height-sm);
}

.h-screen {
  height: 100dvh;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

:root {
  --space-ul: clamp(180px, 77.1428571429px + 7.1428571429vw, 220px);
  --space-xl: clamp(100px, -28.5714285714px + 8.9285714286vw, 150px);
  --space-lg: clamp(40px, 14.2857142857px + 1.7857142857vw, 50px);
  --space-md: clamp(20px, 7.1428571429px + 0.8928571429vw, 25px);
  --space-sm: clamp(20px, 7.1428571429px + 0.8928571429vw, 25px);
  --space-xs: clamp(10px, 3.5714285714px + 0.4464285714vw, 12.5px);
}
@media screen and (max-width: 1440px) {
  :root {
    --space-ul: clamp(100px, 71.320754717px + 7.5471698113vw, 180px);
    --space-xl: clamp(80px, 72.8301886792px + 1.8867924528vw, 100px);
    --space-lg: clamp(32px, 29.1320754717px + 0.7547169811vw, 40px);
    --space-md: clamp(10px, 6.4150943396px + 0.9433962264vw, 20px);
    --space-sm: clamp(10px, 6.4150943396px + 0.9433962264vw, 20px);
    --space-xs: clamp(5px, 3.2075471698px + 0.4716981132vw, 10px);
  }
}

.m-ul {
  margin: var(--space-ul);
}

.mt-ul {
  margin-top: var(--space-ul);
}

.mr-ul {
  margin-right: var(--space-ul);
}

.mb-ul {
  margin-bottom: var(--space-ul);
}

.ml-ul {
  margin-left: var(--space-ul);
}

.p-ul {
  padding: var(--space-ul);
}

.pt-ul {
  padding-top: var(--space-ul);
}

.pr-ul {
  padding-right: var(--space-ul);
}

.pb-ul {
  padding-bottom: var(--space-ul);
}

.pl-ul {
  padding-left: var(--space-ul);
}

.gap-ul {
  gap: var(--space-ul);
}

.row-gap-ul {
  row-gap: var(--space-ul);
}

.col-gap-ul {
  column-gap: var(--space-ul);
}

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

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

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

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

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

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

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

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

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

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

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

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

.col-gap-xl {
  column-gap: var(--space-xl);
}

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

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

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

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

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

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

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

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

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

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

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

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

.col-gap-lg {
  column-gap: var(--space-lg);
}

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

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

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

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

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

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

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

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

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

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

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

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

.col-gap-md {
  column-gap: var(--space-md);
}

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

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

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

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

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

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

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

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

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

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

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

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

.col-gap-sm {
  column-gap: var(--space-sm);
}

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

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

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

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

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

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

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

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

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

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

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

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

.col-gap-xs {
  column-gap: var(--space-xs);
}

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

.grid-cols-1-auto {
  display: grid;
  grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-2-auto {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-3-auto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-4-auto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-5-auto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-6-auto {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-7-auto {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-8-auto {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-9-auto {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-10-auto {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-11-auto {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

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

.grid-cols-12-auto {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
  gap: 0 var(--space-gap);
}

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

@media screen and (max-width: 400px) {
  .us\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-1 {
    grid-column: span 1;
  }
  .us\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-2 {
    grid-column: span 2;
  }
  .us\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-3 {
    grid-column: span 3;
  }
  .us\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-4 {
    grid-column: span 4;
  }
  .us\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-5 {
    grid-column: span 5;
  }
  .us\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-6 {
    grid-column: span 6;
  }
  .us\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-7 {
    grid-column: span 7;
  }
  .us\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-8 {
    grid-column: span 8;
  }
  .us\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-9 {
    grid-column: span 9;
  }
  .us\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-10 {
    grid-column: span 10;
  }
  .us\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-11 {
    grid-column: span 11;
  }
  .us\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .us\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .us\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 400px) {
  .us\:hidden {
    display: none !important;
  }
  .us\:block {
    display: block !important;
  }
  .us\:inline {
    display: inline !important;
  }
  .us\:flex {
    display: flex !important;
  }
  .us\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 640px) {
  .xs\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-1 {
    grid-column: span 1;
  }
  .xs\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-2 {
    grid-column: span 2;
  }
  .xs\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-3 {
    grid-column: span 3;
  }
  .xs\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-4 {
    grid-column: span 4;
  }
  .xs\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-5 {
    grid-column: span 5;
  }
  .xs\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-6 {
    grid-column: span 6;
  }
  .xs\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-7 {
    grid-column: span 7;
  }
  .xs\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-8 {
    grid-column: span 8;
  }
  .xs\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-9 {
    grid-column: span 9;
  }
  .xs\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-10 {
    grid-column: span 10;
  }
  .xs\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-11 {
    grid-column: span 11;
  }
  .xs\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xs\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xs\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 640px) {
  .xs\:hidden {
    display: none !important;
  }
  .xs\:block {
    display: block !important;
  }
  .xs\:inline {
    display: inline !important;
  }
  .xs\:flex {
    display: flex !important;
  }
  .xs\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 750px) {
  .sm\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-1 {
    grid-column: span 1;
  }
  .sm\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-2 {
    grid-column: span 2;
  }
  .sm\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-3 {
    grid-column: span 3;
  }
  .sm\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-4 {
    grid-column: span 4;
  }
  .sm\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-5 {
    grid-column: span 5;
  }
  .sm\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-6 {
    grid-column: span 6;
  }
  .sm\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-7 {
    grid-column: span 7;
  }
  .sm\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-8 {
    grid-column: span 8;
  }
  .sm\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-9 {
    grid-column: span 9;
  }
  .sm\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-10 {
    grid-column: span 10;
  }
  .sm\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-11 {
    grid-column: span 11;
  }
  .sm\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .sm\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .sm\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 750px) {
  .sm\:hidden {
    display: none !important;
  }
  .sm\:block {
    display: block !important;
  }
  .sm\:inline {
    display: inline !important;
  }
  .sm\:flex {
    display: flex !important;
  }
  .sm\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1024px) {
  .md\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-1 {
    grid-column: span 1;
  }
  .md\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-2 {
    grid-column: span 2;
  }
  .md\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-3 {
    grid-column: span 3;
  }
  .md\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-4 {
    grid-column: span 4;
  }
  .md\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-5 {
    grid-column: span 5;
  }
  .md\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-6 {
    grid-column: span 6;
  }
  .md\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-7 {
    grid-column: span 7;
  }
  .md\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-8 {
    grid-column: span 8;
  }
  .md\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-9 {
    grid-column: span 9;
  }
  .md\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-10 {
    grid-column: span 10;
  }
  .md\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-11 {
    grid-column: span 11;
  }
  .md\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .md\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .md\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1024px) {
  .md\:hidden {
    display: none !important;
  }
  .md\:block {
    display: block !important;
  }
  .md\:inline {
    display: inline !important;
  }
  .md\:flex {
    display: flex !important;
  }
  .md\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1280px) {
  .lg\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-1 {
    grid-column: span 1;
  }
  .lg\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-2 {
    grid-column: span 2;
  }
  .lg\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-3 {
    grid-column: span 3;
  }
  .lg\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-4 {
    grid-column: span 4;
  }
  .lg\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-5 {
    grid-column: span 5;
  }
  .lg\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-6 {
    grid-column: span 6;
  }
  .lg\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-7 {
    grid-column: span 7;
  }
  .lg\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-8 {
    grid-column: span 8;
  }
  .lg\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-9 {
    grid-column: span 9;
  }
  .lg\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-10 {
    grid-column: span 10;
  }
  .lg\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-11 {
    grid-column: span 11;
  }
  .lg\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .lg\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .lg\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1280px) {
  .lg\:hidden {
    display: none !important;
  }
  .lg\:block {
    display: block !important;
  }
  .lg\:inline {
    display: inline !important;
  }
  .lg\:flex {
    display: flex !important;
  }
  .lg\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 1440px) {
  .xl\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-1 {
    grid-column: span 1;
  }
  .xl\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-2 {
    grid-column: span 2;
  }
  .xl\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-3 {
    grid-column: span 3;
  }
  .xl\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-4 {
    grid-column: span 4;
  }
  .xl\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-5 {
    grid-column: span 5;
  }
  .xl\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-6 {
    grid-column: span 6;
  }
  .xl\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-7 {
    grid-column: span 7;
  }
  .xl\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-8 {
    grid-column: span 8;
  }
  .xl\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-9 {
    grid-column: span 9;
  }
  .xl\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-10 {
    grid-column: span 10;
  }
  .xl\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-11 {
    grid-column: span 11;
  }
  .xl\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .xl\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .xl\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1440px) {
  .xl\:hidden {
    display: none !important;
  }
  .xl\:block {
    display: block !important;
  }
  .xl\:inline {
    display: inline !important;
  }
  .xl\:flex {
    display: flex !important;
  }
  .xl\:grid {
    display: grid !important;
  }
}
@media screen and (max-width: 2000px) {
  .ul\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-1-auto {
    display: grid;
    grid-template-columns: repeat(0, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-1 {
    grid-column: span 1;
  }
  .ul\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-2-auto {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-2 {
    grid-column: span 2;
  }
  .ul\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-3-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-3 {
    grid-column: span 3;
  }
  .ul\:grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-4-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-4 {
    grid-column: span 4;
  }
  .ul\:grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-5-auto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-5 {
    grid-column: span 5;
  }
  .ul\:grid-cols-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-6-auto {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-6 {
    grid-column: span 6;
  }
  .ul\:grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-7-auto {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-7 {
    grid-column: span 7;
  }
  .ul\:grid-cols-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-8-auto {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-8 {
    grid-column: span 8;
  }
  .ul\:grid-cols-9 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-9-auto {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-9 {
    grid-column: span 9;
  }
  .ul\:grid-cols-10 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-10-auto {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-10 {
    grid-column: span 10;
  }
  .ul\:grid-cols-11 {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-11-auto {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-11 {
    grid-column: span 11;
  }
  .ul\:grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-gap);
  }
  .ul\:grid-cols-12-auto {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr)) auto;
    gap: 0 var(--space-gap);
  }
  .ul\:col-span-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 2000px) {
  .ul\:hidden {
    display: none !important;
  }
  .ul\:block {
    display: block !important;
  }
  .ul\:inline {
    display: inline !important;
  }
  .ul\:flex {
    display: flex !important;
  }
  .ul\:grid {
    display: grid !important;
  }
}
.flex {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.items-evenly {
  align-items: space-evenly;
}

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

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

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

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  z-index: 10;
  padding: var(--space-xs);
}
.nav .nav.is-expanded .nav__body {
  display: flex;
}
.nav div,
.nav span,
.nav a {
  color: var(--color-white);
}
.nav .icon {
  stroke: var(--color-white);
}
.nav__header {
  width: 100%;
  display: flex;
  gap: var(--gap-md);
}
.nav__header div,
.nav__header span,
.nav__header a,
.nav__header button {
  font-size: var(--font-nav);
  color: var(--color-white);
}
.nav__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  overflow: hidden;
  height: 0;
  transition: var(--nav-transition);
}
.nav__container--header {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  height: var(--height-nav);
  padding: 0 var(--gap-xl);
}
@media screen and (max-width: 1024px) {
  .nav__container--header {
    grid-template-columns: repeat(2, auto);
  }
}
.nav__container--main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) 0;
  padding: 1.2rem 1.2rem;
}
@media screen and (max-width: 750px) {
  .nav__container--main {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    padding: 1rem var(--gap-xl);
    padding-bottom: 1.2rem;
  }
}
.nav__button .icon-close {
  display: none;
}
.nav__button .icon-burger {
  display: block;
}
.nav__button[aria-expanded=true] .icon-close {
  display: block;
}
.nav__button[aria-expanded=true] .icon-burger {
  display: none;
}
.nav__button, .nav__container {
  border: 1px solid transparent;
  background: #0f7407 0% 0% no-repeat padding-box;
  border-radius: 6px;
}
.nav__button {
  transition: 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav__button:hover:hover {
    background: var(--color-white);
    border: 1px solid #0f7407;
  }
  .nav__button:hover:hover span {
    color: #0f7407;
  }
  .nav__button:hover:hover svg {
    stroke: #0f7407;
  }
}
.nav__title {
  align-self: center;
  text-align: center;
  margin-top: 0.05em;
}
.nav__title span,
.nav__title a {
  font-size: var(--font-nav-title);
  line-height: 0.9;
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .nav__title {
    margin-top: 0.3em;
    grid-column: span 2;
  }
}
.nav__button {
  width: 7em;
  min-width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .nav__button {
    width: unset;
    min-width: 60px;
  }
}
.nav__options {
  justify-self: end;
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.nav__list {
  display: flex;
  gap: var(--gap-md);
  line-height: 1.1;
}
.nav__list li.selected a {
  text-decoration: underline;
}
.nav__list--primary {
  order: 1;
  font-size: var(--font-body-lg);
  flex-direction: column;
}
.nav__list--secondary {
  order: 3;
  grid-column: span 2;
  font-size: var(--font-body-xs);
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-lg) var(--gap-xl);
}
@media screen and (max-width: 750px) {
  .nav__list--secondary {
    grid-column: span 1;
    flex-direction: column;
    gap: var(--gap-md);
    order: 2;
  }
}
@media screen and (max-width: 750px) {
  .nav__list {
    gap: var(--gap-lg);
  }
}
@media (hover: hover) and (pointer: fine) {
  .nav__list:hover a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
}
.nav .desktop-lg {
  display: flex;
}
@media screen and (max-width: 1280px) {
  .nav .desktop-lg {
    display: none;
  }
}
.nav .desktop-md {
  display: flex;
}
@media screen and (max-width: 1024px) {
  .nav .desktop-md {
    display: none;
  }
}
.nav .mobile-lg {
  display: none;
}
@media screen and (max-width: 1280px) {
  .nav .mobile-lg {
    display: flex;
  }
}
.nav .mobile-md {
  display: none;
}
@media screen and (max-width: 1024px) {
  .nav .mobile-md {
    display: flex;
  }
}

.nav__featured-exhibitions-container {
  order: 2;
  display: flex;
  justify-content: end;
}
.nav__featured-exhibitions-container .nav__featured-exhibitions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-sm);
}
.nav__featured-exhibitions-container .nav__featured-exhibitions .nav__featured-exhibition-card img {
  max-width: 300px;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.nav__featured-exhibitions-container .nav__featured-exhibitions .nav__featured-exhibition-card .nav__featured-exhibition-card__subtitle {
  font-style: italic;
}
.nav__featured-exhibitions-container .nav__featured-exhibitions .nav__featured-exhibition-card .nav__featured-exhibition-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  font-size: var(--font-body-xs);
  line-height: 1;
}
@media screen and (max-width: 750px) {
  .nav__featured-exhibitions-container {
    order: 3;
  }
}

.nav__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.1960784314) 0% 0% no-repeat padding-box;
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: var(--nav-transition-duration);
}

.nav.is-expanded .nav__overlay {
  opacity: 1;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  pointer-events: all;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-black);
}
.footer div,
.footer a,
.footer li {
  line-height: 1.1;
  color: var(--color-white);
}
.footer ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.footer a {
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .footer a:hover:hover {
    text-decoration: underline;
  }
}
.footer > * {
  display: grid;
  gap: var(--space-lg) var(--space-lg);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.footer__extra-detail-info {
  display: none;
}
@media screen and (max-width: 1280px) {
  .footer__extra-detail-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }
}
.footer__primary-links-list {
  order: 1;
}
.footer__secondary-links-list {
  order: 2;
}
.footer__tertiary-links-list {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.footer__extra-detail-info {
  order: 4;
}
.footer__logos {
  order: 5;
}
.footer__logos div {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}
@media screen and (max-width: 1280px) {
  .footer__logos {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  .footer__logos div {
    padding: var(--gap-md);
  }
}
@media screen and (max-width: 1280px) {
  .footer > * {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__primary-links-list {
    order: 1;
  }
  .footer__secondary-links-list {
    order: 3;
  }
  .footer__tertiary-links-list {
    order: 4;
  }
  .footer__extra-detail-info {
    order: 2;
  }
}
@media screen and (max-width: 640px) {
  .footer > *:nth-child(1) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .footer > * {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__primary-links-list {
    order: 2;
    grid-column: span 2;
  }
  .footer__secondary-links-list {
    order: 3;
    grid-column: span 2;
  }
  .footer__tertiary-links-list {
    order: 4;
    grid-column: span 2;
  }
  .footer__extra-detail-info {
    order: 1;
    grid-column: span 2;
  }
}

.cookie-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 30;
  padding: var(--space-md);
  pointer-events: none;
}
.cookie-banner p,
.cookie-banner span,
.cookie-banner a,
.cookie-banner svg {
  color: var(--color-white);
  stroke: var(--color-white);
}
.cookie-banner__wrapper {
  position: absolute;
  bottom: -100%;
  right: 0;
  width: 100%;
  max-width: 1200px;
  transition: var(--cookie-banner-transition-duration);
}
.cookie-banner.visible {
  pointer-events: all;
}
.cookie-banner.visible .cookie-banner__wrapper {
  bottom: 0;
}
.cookie-banner__container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--space-md);
}
.cookie-banner__header, .cookie-banner__footer {
  padding: var(--space-md);
}
.cookie-banner__footer {
  font-size: var(--font-body-xs);
}
@media (hover: hover) and (pointer: fine) {
  .cookie-banner__footer a:hover:hover {
    text-decoration: underline;
  }
}
.cookie-banner__content {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: #0f7407 0% 0% no-repeat padding-box;
  border-radius: 6px;
  opacity: 1;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}
@media screen and (max-width: 750px) {
  .cookie-banner__content {
    padding: var(--space-md);
  }
}
.cookie-banner__buttons.section-buttons button {
  flex-grow: 1;
  text-align: center;
  padding: 22px 25px;
  padding-top: 24px;
  font-size: var(--font-body-xs) !important;
  color: var(--color-white);
  border: 1px solid transparent;
  transition: var(--cookie-banner-transition-duration);
  background: #0f7407 0% 0% no-repeat padding-box;
  border-radius: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .cookie-banner__buttons.section-buttons button:hover:hover {
    background: var(--color-white) !important;
    border: 1px solid #0f7407 !important;
    color: #0f7407 !important;
  }
}
@media screen and (max-width: 400px) {
  .cookie-banner__buttons.section-buttons {
    flex-direction: column;
  }
}

@font-face {
  font-family: "Asfalt";
  src: url("../fonts/ABCAsfalt-CompressedRegular.woff2") format("woff2"), url("../fonts/ABCAsfalt-CompressedRegular.woff") format("woff");
  font-style: 100;
}
@font-face {
  font-family: "Asfalt Regular";
  src: url("../fonts/ABCAsfalt-CondensedRegular-Trial.woff2") format("woff2"), url("../fonts/ABCAsfalt-CondensedRegular-Trial.woff") format("woff");
  font-style: 100;
}
@font-face {
  font-family: "Rhymes";
  src: url("../fonts/RhymesText-Regular.woff2") format("woff2"), url("../fonts/RhymesText-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Rhymes";
  src: url("../fonts/RhymesText-Italic.woff2") format("woff2"), url("../fonts/RhymesText-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
:root {
  /* GENERAL */
  --main-width: 2000px;
  --main-font: "Rhymes";
  --accessibility-font-size: 1;
  --font-nav-title: calc(
    clamp(19px, 13.8571428571px + 0.3571428571vw, 21px) * var(--accessibility-font-size)
  );
  --font-nav: calc(
    clamp(13px, 5.2857142857px + 0.5357142857vw, 16px) * var(--accessibility-font-size)
  );
  --font-body-us: calc(
    clamp(13px, 7.8571428571px + 0.3571428571vw, 15px) * var(--accessibility-font-size)
  );
  --font-body-xs: calc(
    clamp(16px, 10.8571428571px + 0.3571428571vw, 18px) * var(--accessibility-font-size)
  );
  --font-body-sm: calc(
    clamp(20px, 9.7142857143px + 0.7142857143vw, 24px) * var(--accessibility-font-size)
  );
  --font-body-md: calc(
    clamp(25px, 17.2857142857px + 0.5357142857vw, 28px) * var(--accessibility-font-size)
  );
  --font-body-lg: calc(
    clamp(31px, 18.1428571429px + 0.8928571429vw, 36px) * var(--accessibility-font-size)
  );
  --font-body-xl: calc(
    clamp(39px, 23.5714285714px + 1.0714285714vw, 45px) * var(--accessibility-font-size)
  );
  --font-body-ul: calc(
    clamp(61px, 40.4285714286px + 1.4285714286vw, 69px) * var(--accessibility-font-size)
  );
  --font-display-xs: calc(
    clamp(9px, 7.7333333333px + 0.3333333333vw, 14.4px) * var(--accessibility-font-size)
  );
  --font-display-sm: calc(
    clamp(12px, 10.3111111111px + 0.4444444444vw, 19.2px) * var(--accessibility-font-size)
  );
  --font-display-md: calc(
    clamp(16px, 13.7481481481px + 0.5925925926vw, 25.6px) * var(--accessibility-font-size)
  );
  --font-display-lg: calc(
    clamp(24px, 20.6222222222px + 0.8888888889vw, 38.4px) * var(--accessibility-font-size)
  );
  --font-display-xl: calc(
    clamp(32px, 27.4962962963px + 1.1851851852vw, 51.2px) * var(--accessibility-font-size)
  );
  --font-display-ul: calc(
    clamp(200px, 71.4285714286px + 8.9285714286vw, 250px) * var(--accessibility-font-size)
  );
  --icon-sm: calc(clamp(20px, 17.6543209877px + 0.6172839506vw, 30px));
  --icon-md: calc(clamp(28px, 27.5308641975px + 0.1234567901vw, 30px));
  --icon-lg: calc(clamp(30px, 27.6543209877px + 0.6172839506vw, 40px));
  --icon-xl: calc(clamp(40px, 36.4814814815px + 0.9259259259vw, 55px));
  /* SPACES */
  --height-xl: calc(clamp(491px, 377.2345679012px + 29.9382716049vw, 976px));
  --height-lg: calc(clamp(472px, 407.024691358px + 17.0987654321vw, 749px));
  --height-md: calc(clamp(234px, 171.6049382716px + 16.4197530864vw, 500px));
  --height-sm: calc(clamp(234px, 210.3086419753px + 6.2345679012vw, 335px));
  --space-header-top: clamp(100px, 104.6913580247px + -1.2345679012vw, 80px);
  --space-gap: clamp(10px, 6.4814814815px + 0.9259259259vw, 25px);
  --height-nav: calc(clamp(48px, 46.5925925926px + 0.3703703704vw, 54px));
  /* COLORS */
  --color-black: #1e291e;
  --color-white: #fff;
  --color-primary: #89ff00;
  --color-transition: #89ff00;
  --color-text: #1e291e;
  --color-text-fixed: #fff;
  --color-bg: #fff;
  --color-bg-fixed: #1e291e;
  --color-black-0: rgba(30, 41, 30, 0);
  --color-white-0: rgba(255, 255, 255, 0);
  --color-primary-0: rgba(137, 255, 0, 0);
  --color-black-10: rgba(30, 41, 30, 0.1);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-primary-10: rgba(137, 255, 0, 0.1);
  --color-black-20: rgba(30, 41, 30, 0.2);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-primary-20: rgba(137, 255, 0, 0.2);
  --color-black-30: rgba(30, 41, 30, 0.3);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-primary-30: rgba(137, 255, 0, 0.3);
  --color-black-40: rgba(30, 41, 30, 0.4);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-primary-40: rgba(137, 255, 0, 0.4);
  --color-black-50: rgba(30, 41, 30, 0.5);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-primary-50: rgba(137, 255, 0, 0.5);
  --color-black-60: rgba(30, 41, 30, 0.6);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-primary-60: rgba(137, 255, 0, 0.6);
  --color-black-70: rgba(30, 41, 30, 0.7);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-primary-70: rgba(137, 255, 0, 0.7);
  --color-black-80: rgba(30, 41, 30, 0.8);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-primary-80: rgba(137, 255, 0, 0.8);
  --color-black-90: rgba(30, 41, 30, 0.9);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-primary-90: rgba(137, 255, 0, 0.9);
  /* EASING */
  --easing1: cubic-bezier(0.85, 0, 0.15, 1);
  --speed-fast: 0.2s;
  --speed-mid: 0.5s;
  --dropdown-transition: height 0.3s ease;
  --dropdown-transition-duration: 0.3s;
  --nav-transition: height 0.2s cubic-bezier(0.85, 0, 0.15, 1);
  --nav-transition-duration: 0.2s;
  --cookie-banner-transition-duration: 0.2s;
  --gap-xs: 0.1rem;
  --gap-sm: 0.2rem;
  --gap-md: 0.3rem;
  --gap-lg: 0.5rem;
  --gap-xl: 0.7rem;
  /* GAPS */
  --gap-1: clamp(2px, 1.2962962963px + 0.1851851852vw, 5px);
  --gap-2: clamp(5px, 3.8271604938px + 0.3086419753vw, 10px);
  --gap-3: clamp(10px, 6.4814814815px + 0.9259259259vw, 25px);
  --gap-4: clamp(20px, 12.962962963px + 1.8518518519vw, 50px);
  /* BORDER OUTLINES */
  --outline-sm: 1px solid var(--color-text);
  --outline-md: 2px solid var(--color-text);
  --outline-lg: 3px solid var(--color-text);
  /* BORDER RADIUS */
  --radius-1: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-round: 50%;
}
:root .accessibility-invert {
  --color-text: #fff;
  --color-bg: #1e291e;
}
:root .accessibility-biggerText {
  --font-size-xs: calc(clamp(24px, 20.6222222222px + 0.8888888889vw, 38.4px) * 1.5);
  --font-size-sm: calc(clamp(24px, 20.6222222222px + 0.8888888889vw, 38.4px) * 1.5);
  --font-size-md: calc(clamp(24px, 20.6222222222px + 0.8888888889vw, 38.4px) * 1.5);
}
@media screen and (max-width: 1440px) {
  :root {
    --font-nav-title: calc(
      clamp(18px, 17.641509434px + 0.0943396226vw, 19px) * var(--accessibility-font-size)
    );
    --font-nav: calc(
      clamp(13px, 13px + 0vw, 13px) * var(--accessibility-font-size)
    );
    --font-body-us: calc(
      clamp(12px, 11.641509434px + 0.0943396226vw, 13px) * var(--accessibility-font-size)
    );
    --font-body-xs: calc(
      clamp(14px, 13.2830188679px + 0.1886792453vw, 16px) * var(--accessibility-font-size)
    );
    --font-body-sm: calc(
      clamp(16px, 14.5660377358px + 0.3773584906vw, 20px) * var(--accessibility-font-size)
    );
    --font-body-md: calc(
      clamp(18px, 15.4905660377px + 0.6603773585vw, 25px) * var(--accessibility-font-size)
    );
    --font-body-lg: calc(
      clamp(20px, 16.0566037736px + 1.0377358491vw, 31px) * var(--accessibility-font-size)
    );
    --font-body-xl: calc(
      clamp(24px, 18.6226415094px + 1.4150943396vw, 39px) * var(--accessibility-font-size)
    );
    --font-body-ul: calc(
      clamp(30px, 18.8867924528px + 2.9245283019vw, 61px) * var(--accessibility-font-size)
    );
    --font-display-ul: calc(
      clamp(120px, 91.320754717px + 7.5471698113vw, 200px) * var(--accessibility-font-size)
    );
  }
}

input,
textarea,
select {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  outline: none;
  transition: all 0.2s ease-in-out;
}

input {
  border: none;
}
form input {
  width: 100%;
  display: block;
  background-color: transparent;
  border: var(--outline-md);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
  border: none;
}
form input[type=radio], form input[type=checkbox] {
  width: 20px;
  height: 20px;
  border: var(--outline-md);
  border-radius: var(--radius-1); /* Apply a small border radius */
  background-color: transparent;
}
form input[type=radio]:checked, form input[type=checkbox]:checked {
  background-color: var(--color-bg); /* Optional: Highlight when checked */
  border-color: var(--color-text);
}
form input:focus {
  border: 1.2px solid var(--color-primary) !important;
}
form textarea {
  width: 100%;
  display: block;
  background-color: transparent;
  border: var(--outline-md);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
}

.marketingForm h1 {
  display: none;
}

.loader {
  background-color: var(--color-white);
  z-index: 9999;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  width: 100vw;
  height: 100dvh;
  position: fixed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loader .logo-sticker {
  width: 100%;
  max-width: 130px;
  height: auto;
  position: relative;
  margin-bottom: var(--gap-md);
}
@media screen and (max-width: 750px) {
  .loader .logo-sticker {
    max-width: 90px;
  }
}

/*
Source - https://stackoverflow.com/a
Posted by thetallweeks, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-10, License - CC BY-SA 4.0
*/
.loading {
  font-size: var(--font-body-xs);
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
  animation: ellipsis steps(4, end) 1200ms infinite;
  font-size: var(--font-body-xs);
  content: "…";
  /* ascii code for the ellipsis character */
  width: 0px;
  position: absolute;
}

@keyframes ellipsis {
  to {
    width: 1em;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1em;
  }
}
.orientation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  display: none;
}
.orientation-overlay.visible {
  display: block;
}

.button,
button {
  display: flex;
  background: transparent;
  font-size: inherit;
  border: unset;
  cursor: pointer;
}

.section-buttons {
  display: flex;
  gap: var(--gap-sm);
}
.section-buttons.section-buttons--placeholder {
  visibility: hidden;
  pointer-events: none;
}
@media screen and (max-width: 750px) {
  .section-buttons.section-buttons--placeholder {
    display: none;
  }
}
.section-buttons a,
.section-buttons button,
.section-buttons .button {
  --bg: #0f7407;
  --fg: var(--color-white);
  display: inline-block;
  padding: 12px 25px;
  padding-top: 14px;
  border-radius: var(--radius-md);
  border: 1px solid #0f7407;
  font-size: var(--font-body-us) !important;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.section-buttons a.disabled,
.section-buttons button.disabled,
.section-buttons .button.disabled {
  pointer-events: none;
  opacity: 0.3;
}
.section-buttons a.active,
.section-buttons button.active,
.section-buttons .button.active {
  background: #0f7407;
  color: var(--color-white);
}
@media (hover: hover) and (pointer: fine) {
  .section-buttons a:hover:not(.arrow-link):not(.disabled):hover,
  .section-buttons button:hover:not(.arrow-link):not(.disabled):hover,
  .section-buttons .button:hover:not(.arrow-link):not(.disabled):hover {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid transparent;
  }
}
.section-buttons--big a,
.section-buttons--big button,
.section-buttons--big .button {
  font-size: var(--font-body-xs);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  background: var(--color-black);
  border: 1px solid transparent;
}
.section-buttons .arrow-link {
  border: unset;
  display: none;
}
.section-buttons .arrow-link svg {
  fill: var(--color-black);
}
@media screen and (max-width: 750px) {
  .section-buttons .arrow-link {
    display: block;
    padding: 1em 0.2em;
    padding-bottom: 0.8em;
    background: unset;
  }
}
.section-buttons .text-link {
  display: block;
}
@media screen and (max-width: 750px) {
  .section-buttons .text-link {
    display: none;
  }
}

.filter button {
  --bg: #9be474;
  --fg: var(--color-black);
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  padding: 12px 25px;
  border-radius: var(--radius-md);
  font-size: var(--font-body-us) !important;
  border: 1px solid var(--color-black);
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}
.filter button span {
  padding-top: 2px;
}
.filter button .icon-inline {
  margin-right: -0.5em;
}
.filter button.active {
  background: var(--bg);
  border: 1px solid transparent;
  color: var(--fg);
}
.filter button.active span,
.filter button.active svg {
  color: var(--fg);
  stroke: var(--fg);
}
@media (hover: hover) and (pointer: fine) {
  .filter button:hover:not(.arrow-link):hover {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid transparent;
  }
  .filter button:hover:not(.arrow-link):hover span,
  .filter button:hover:not(.arrow-link):hover svg {
    color: var(--fg);
    stroke: var(--fg);
  }
}
.filter__option .icon-inline {
  display: none;
}
.filter__option.active .icon-inline {
  display: block;
}
.filter__option-category .icon-inline {
  transform: rotate(0deg);
  transition: 0.2s;
}
.filter__option-category.expanded .icon-inline {
  transform: rotate(180deg);
}

.filter__tags button {
  --bg: #9be474;
  --fg: var(--color-black);
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-body-us) !important;
  border: 1px solid transparent;
  background: var(--bg);
  white-space: nowrap;
  cursor: pointer;
}
.filter__tags button span {
  padding-top: 2px;
  line-height: 1;
}
.filter__tags button span,
.filter__tags button svg {
  color: var(--fg);
  stroke: var(--fg);
}
.filter__tags button .icon-inline {
  margin-right: -0.2em;
}
.filter__tags button.filter__reset {
  border: 1px solid transparent;
  background: var(--color-black);
}
.filter__tags button.filter__reset span {
  padding-top: 2px;
  color: var(--color-white);
}

.slider-full-window {
  pointer-events: none;
}
.slider-full-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-full-width img {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 1024px) {
  .slider-full-width img {
    aspect-ratio: 5/4;
  }
}
@media screen and (max-width: 750px) {
  .slider-full-width img {
    aspect-ratio: 4/5;
  }
}

.slider-fixed-height img {
  aspect-ratio: 4/5;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.slider-fixed-landscape-height img {
  aspect-ratio: 5/4;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.slider-lightbox img {
  aspect-ratio: 5/4;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.splide__track {
  overflow: visible;
}

.splide[data-cols="1"].is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.splide[data-cols="2"].is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.splide[data-cols="3"].is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.splide[data-cols="4"].is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.splide[data-cols="5"].is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.splide[data-cols="6"].is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.splide[data-cols="7"].is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.splide[data-cols="8"].is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--gap-sm);
}

@media screen and (max-width: 750px) {
  .splide[data-cols="1"].is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
  .splide[data-cols="1"].is-initialized:not(.is-active)[data-slides-length="1"] .splide__slide {
    grid-column: span 1;
  }
  .splide[data-cols="1"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .splide[data-cols="1"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 1 !important;
  }
  .splide[data-cols="2"].is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
  .splide[data-cols="2"].is-initialized:not(.is-active)[data-slides-length="1"] .splide__slide {
    grid-column: span 2;
  }
  .splide[data-cols="2"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .splide[data-cols="2"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 1 !important;
  }
  .splide[data-cols="3"].is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
  .splide[data-cols="3"].is-initialized:not(.is-active)[data-slides-length="1"] .splide__slide {
    grid-column: span 3;
  }
  .splide[data-cols="3"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .splide[data-cols="3"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 1 !important;
  }
  .splide[data-cols="3"].is-initialized:not(.is-active)[data-slides-length="3"] .splide__slide {
    grid-column: span 3;
  }
  .splide[data-cols="3"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 3;
  }
  .splide[data-cols="4"].is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
  .splide[data-cols="4"].is-initialized:not(.is-active)[data-slides-length="1"] .splide__slide {
    grid-column: span 4;
  }
  .splide[data-cols="4"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .splide[data-cols="4"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 1 !important;
  }
  .splide[data-cols="4"].is-initialized:not(.is-active)[data-slides-length="3"] .splide__slide {
    grid-column: span 4;
  }
  .splide[data-cols="5"].is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
  .splide[data-cols="5"].is-initialized:not(.is-active)[data-slides-length="1"] .splide__slide {
    grid-column: span 5;
  }
  .splide[data-cols="5"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .splide[data-cols="5"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 1 !important;
  }
  .splide[data-cols="5"].is-initialized:not(.is-active)[data-slides-length="3"] .splide__slide {
    grid-column: span 5;
  }
  .splide[data-cols="5"].is-initialized:not(.is-active)[data-slides-length="4"] .splide__slide {
    grid-column: span 5;
  }
  .splide[data-cols="6"].is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
  .splide[data-cols="6"].is-initialized:not(.is-active)[data-slides-length="1"] .splide__slide {
    grid-column: span 6;
  }
  .splide[data-cols="6"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .splide[data-cols="6"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 1 !important;
  }
  .splide[data-cols="6"].is-initialized:not(.is-active)[data-slides-length="3"] .splide__slide {
    grid-column: span 6;
  }
  .splide[data-cols="6"].is-initialized:not(.is-active)[data-slides-length="4"] .splide__slide {
    grid-column: span 6;
  }
  .splide[data-cols="6"].is-initialized:not(.is-active)[data-slides-length="5"] .splide__slide {
    grid-column: span 6;
  }
  .splide[data-cols="7"].is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
  .splide[data-cols="7"].is-initialized:not(.is-active)[data-slides-length="1"] .splide__slide {
    grid-column: span 7;
  }
  .splide[data-cols="7"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .splide[data-cols="7"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 1 !important;
  }
  .splide[data-cols="7"].is-initialized:not(.is-active)[data-slides-length="3"] .splide__slide {
    grid-column: span 7;
  }
  .splide[data-cols="7"].is-initialized:not(.is-active)[data-slides-length="4"] .splide__slide {
    grid-column: span 7;
  }
  .splide[data-cols="7"].is-initialized:not(.is-active)[data-slides-length="5"] .splide__slide {
    grid-column: span 7;
  }
  .splide[data-cols="7"].is-initialized:not(.is-active)[data-slides-length="6"] .splide__slide {
    grid-column: span 7;
  }
  .splide[data-cols="8"].is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-sm);
  }
  .splide[data-cols="8"].is-initialized:not(.is-active)[data-slides-length="1"] .splide__slide {
    grid-column: span 8;
  }
  .splide[data-cols="8"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .splide[data-cols="8"].is-initialized:not(.is-active)[data-slides-length="2"] .splide__slide {
    grid-column: span 1 !important;
  }
  .splide[data-cols="8"].is-initialized:not(.is-active)[data-slides-length="3"] .splide__slide {
    grid-column: span 8;
  }
  .splide[data-cols="8"].is-initialized:not(.is-active)[data-slides-length="4"] .splide__slide {
    grid-column: span 8;
  }
  .splide[data-cols="8"].is-initialized:not(.is-active)[data-slides-length="5"] .splide__slide {
    grid-column: span 8;
  }
  .splide[data-cols="8"].is-initialized:not(.is-active)[data-slides-length="6"] .splide__slide {
    grid-column: span 8;
  }
  .splide[data-cols="8"].is-initialized:not(.is-active)[data-slides-length="7"] .splide__slide {
    grid-column: span 8;
  }
}
.slider-full-width.splide.is-initialized:not(.is-active) .splide__list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.splide__slide {
  --angle: -2deg;
}
.splide__slide a {
  transform: scale(1) rotate(0deg);
  transition: 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .splide__slide:hover a:hover {
    transform: scale(0.99) rotate(var(--angle));
    transform-origin: top center;
  }
}

.slider-variable-height-images .splide__slide {
  --angle: -2deg;
  transform: scale(1) rotate(0deg);
  transition: 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .slider-variable-height-images .splide__slide:hover:hover {
    transform: scale(0.99) rotate(var(--angle));
    transform-origin: top center;
  }
}

.slider-lightbox .splide__slide {
  --angle: -2deg;
}
.slider-lightbox .splide__slide img {
  transform: unset;
  transition: 0.2s;
}
.slider-lightbox .splide__slide img:hover {
  transform: unset;
  transform-origin: top center;
}
.slider-lightbox .splide__track {
  overflow: hidden;
}
.slider-lightbox .splide__arrow {
  background: none;
}
.slider-lightbox .splide__arrow--next {
  right: var(--space-md);
}
.slider-lightbox .splide__arrow--prev {
  left: var(--space-md);
}
.slider-lightbox .splide__arrow .icon {
  stroke: #0f7407;
  stroke-width: 2;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: unset;
}

.splide__arrow {
  background-color: #0f7407;
  border: 1px solid transparent;
  opacity: 1;
  transition: 0.2s;
}
.splide__arrow--next {
  justify-content: center;
  right: 0;
}
.splide__arrow--next .icon {
  margin-left: 0.2em;
}
.splide__arrow--prev {
  justify-content: center;
  left: 0;
}
.splide__arrow--prev .icon {
  margin-right: 0.2em;
}
.splide__arrow .icon {
  stroke: var(--color-white);
  stroke-width: 2;
}
@media (hover: hover) and (pointer: fine) {
  .splide__arrow:hover:hover {
    background-color: var(--color-white);
    border: 1px solid #0f7407;
  }
  .splide__arrow:hover:hover .icon {
    stroke: #0f7407;
  }
}

.splide__track--nav > .splide__list > .splide__slide {
  border: unset !important;
}

#swup {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  flex-grow: 1;
}
main section:first-child {
  margin-top: 0;
}
main section:last-child {
  margin-bottom: 0;
}
main section:first-of-type {
  margin-top: 0;
}
main section:last-of-type {
  margin-bottom: 0;
}

header .section__title {
  padding: 0 var(--space-md);
}
@media screen and (max-width: 750px) {
  header .section__title h2 {
    text-align: center;
  }
}
section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: var(--space-ul) 0;
  padding: 0 var(--space-md);
}

.header__header {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.main-header,
.header {
  display: flex;
  flex-direction: column;
  margin: var(--space-xl) 0;
  gap: var(--space-lg);
  margin-bottom: calc(var(--space-lg) * 1.5);
}
.main-header__header,
.header__header {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.main-header__title,
.header__title {
  padding: 0 var(--space-md);
  font-size: var(--font-body-xs);
}
.main-header__title h1,
.header__title h1 {
  font-size: inherit;
}
.main-header__breadcrumbs,
.header__breadcrumbs {
  display: flex;
  gap: var(--gap-lg) var(--space-sm);
  flex-wrap: wrap;
}
.main-header__breadcrumbs li,
.header__breadcrumbs li {
  display: flex;
  flex-wrap: nowrap;
}
.main-header__breadcrumbs li,
.main-header__breadcrumbs a,
.header__breadcrumbs li,
.header__breadcrumbs a {
  line-height: 1;
}
.main-header__nav,
.header__nav {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: var(--gap-lg) var(--space-sm);
  font-size: var(--font-body-md);
  padding: 0 var(--space-md);
}
@media (hover: hover) and (pointer: fine) {
  .main-header__nav a:hover:hover,
  .header__nav a:hover:hover {
    text-decoration: underline;
  }
}
.main-header__headline,
.header__headline {
  font-size: var(--font-body-ul);
  padding: 0 var(--space-md);
  margin-top: 1rem;
  line-height: 1.1;
}
.main-header__image,
.header__image {
  aspect-ratio: 12/5;
  width: 100%;
  height: auto;
}
.main-header__image img,
.header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 750px) {
  .main-header__image,
  .header__image {
    aspect-ratio: 5/4;
  }
}
.main-header__intro-text,
.header__intro-text {
  font-size: var(--font-body-xl);
  padding: 0 var(--space-md);
  line-height: 1.2;
}
.main-header--extra-bottom-margin,
.header--extra-bottom-margin {
  margin-bottom: var(--space-ul);
}
.main-header .section__title,
.header .section__title {
  margin-top: 1rem;
  padding: 0 var(--space-md);
}
@media screen and (max-width: 750px) {
  .main-header .section__title h2,
  .header .section__title h2 {
    text-align: center;
  }
}

.permanent-collection .main-header__intro-text {
  font-size: var(--font-body-xl);
  padding: 0 var(--space-md);
  line-height: 1.2;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.permanent-collection .main-header__intro-text--extra-bottom-margin {
  margin-bottom: var(--space-xl);
}

.header-home {
  margin-bottom: var(--space-ul);
}
.header-home__video video {
  width: 100%;
  height: 100dvh;
  object-fit: cover;
}

.header--detail-page {
  margin-top: unset;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
@media screen and (max-width: 1024px) {
  .section-header--wrap {
    align-items: end;
    flex-direction: column;
    gap: var(--gap-xl);
  }
}
@media screen and (max-width: 750px) {
  .section-header--wrap {
    align-items: start;
  }
}
.section-header .section-buttons {
  margin-bottom: 0.2em;
}
@media screen and (max-width: 750px) {
  .section-header .section-buttons {
    margin-bottom: unset;
  }
}

.section__title {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media screen and (max-width: 750px) {
  .section__title {
    width: calc(100% - 60px);
  }
}

.section-title {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-size: var(--font-display-ul);
}
.section-title h2 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Asfalt";
  font-size: var(--font-display-ul);
  letter-spacing: 0.01em;
  transform: scaleY(43%);
  transform-origin: top;
  width: 100%;
  text-align: center;
  line-height: 0.85;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 750px) {
  .section-title h2 {
    text-align: left;
  }
}
.section-title .section-title__placeholder {
  position: unset;
  font-family: "Asfalt Regular";
  font-size: 0.435em;
  letter-spacing: 0.018em;
  transform: unset;
  visibility: hidden;
  display: block;
  text-align: center;
  line-height: 0.85;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 750px) {
  .section-title .section-title__placeholder {
    text-align: left;
  }
}

.section__subtitle {
  text-align: center;
  font-size: var(--font-body-xl);
}
.section__subtitle--italic {
  font-style: italic;
}

.section__date,
.section__author {
  text-align: center;
  font-size: var(--font-body-lg);
}

.section__image {
  display: flex;
}

.section__image--centered {
  max-width: 900px;
  margin: auto;
  width: 100%;
}
.section__image--centered img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  object-position: center;
}

.section__video-embed {
  display: flex;
  max-width: 900px;
  margin: auto;
  width: 100%;
}
.section__video-embed iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  display: none;
}
.section__video-embed .section__video-fallback-message {
  display: none;
  padding: var(--space-md);
  margin: var(--space-md);
  border: 1px solid #0f7407;
  border-radius: var(--radius-md);
  font-size: var(--font-body-sm);
  line-height: 1.2;
}
.section__video-embed .section__video-fallback-message button {
  display: inline;
}
.section__video-embed .section__video-fallback-message button,
.section__video-embed .section__video-fallback-message a {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .section__video-embed .section__video-fallback-message button:hover:hover,
  .section__video-embed .section__video-fallback-message a:hover:hover {
    text-decoration: none;
  }
}
.section__video-embed .section__video-fallback-message span,
.section__video-embed .section__video-fallback-message button,
.section__video-embed .section__video-fallback-message a {
  color: #0f7407;
}
.section__video-embed iframe.visible,
.section__video-embed .section__video-fallback-message.visible {
  display: block;
}

.section-body-text,
.section-body-text-narrow,
.section-extrainfo {
  font-size: var(--font-body-md);
  line-height: 1.3;
}
.section-body-text h4,
.section-body-text-narrow h4,
.section-extrainfo h4 {
  font-size: var(--font-body-lg);
  line-height: 1.3;
}
.section-body-text p,
.section-body-text a,
.section-body-text li,
.section-body-text strong,
.section-body-text em,
.section-body-text i,
.section-body-text-narrow p,
.section-body-text-narrow a,
.section-body-text-narrow li,
.section-body-text-narrow strong,
.section-body-text-narrow em,
.section-body-text-narrow i,
.section-extrainfo p,
.section-extrainfo a,
.section-extrainfo li,
.section-extrainfo strong,
.section-extrainfo em,
.section-extrainfo i {
  font-size: var(--font-body-md);
  line-height: 1.3;
}

.section-body-text-narrow .text-wrapper {
  max-width: 900px;
}
.section-body-text-narrow--centered .text-wrapper {
  max-width: 800px;
  margin: auto;
}

.section__intro-text {
  font-size: var(--font-body-md);
  line-height: 1.3;
}
.section__intro-text--medium {
  font-size: var(--font-body-lg);
  line-height: 1.2;
}
.section__intro-text--big {
  font-size: var(--font-body-xl);
  line-height: 1.2;
}
.section__intro-text--big p,
.section__intro-text--big a,
.section__intro-text--big i,
.section__intro-text--big em {
  font-size: var(--font-body-xl);
  line-height: 1.2;
}
@media screen and (max-width: 750px) {
  .section__intro-text--big {
    font-size: var(--font-body-md);
    line-height: 1.2;
  }
  .section__intro-text--big p,
  .section__intro-text--big a,
  .section__intro-text--big i,
  .section__intro-text--big em {
    font-size: var(--font-body-md);
    line-height: 1.2;
  }
}

.section-two-columns {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-lg);
}
.section-two-columns h2,
.section-two-columns .section__subtitle {
  text-align: left;
}
.section-two-columns .section__subtitle {
  font-size: var(--font-body-md);
  font-style: italic;
}
.section-two-columns .section-body-text {
  font-size: var(--font-body-sm);
}
.section-two-columns .section-header,
.section-two-columns .section-body-text,
.section-two-columns .section-buttons {
  grid-column: 1/span 3;
}
.section-two-columns img {
  grid-column: 4/span 3;
  grid-row: 1/span 4;
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 1024px) {
  .section-two-columns .section-header,
  .section-two-columns .section-body-text,
  .section-two-columns .section-buttons {
    grid-column: 1/span 4;
  }
  .section-two-columns img {
    grid-column: 5/span 2;
  }
}
@media screen and (max-width: 750px) {
  .section-two-columns {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .section-two-columns .section-header,
  .section-two-columns .section-body-text,
  .section-two-columns .section-buttons {
    grid-column: 1/span 1;
  }
  .section-two-columns img {
    grid-column: 1/span 1;
    grid-row: unset;
  }
  .section-two-columns > .section-buttons {
    display: none;
  }
}

.section-featured-images-list ul,
.section-featured-pages-list ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--gap-sm);
}
@media screen and (max-width: 1024px) {
  .section-featured-images-list ul,
  .section-featured-pages-list ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 750px) {
  .section-featured-images-list ul,
  .section-featured-pages-list ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.rich-text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.section-dropdowns,
.section-calendar {
  padding: unset;
}
.section-dropdowns .dropdown > div,
.section-dropdowns .section-header,
.section-calendar .dropdown > div,
.section-calendar .section-header {
  padding: 0 var(--space-md);
}
@media (hover: hover) and (pointer: fine) {
  .section-dropdowns:hover .dropdown:hover,
  .section-calendar:hover .dropdown:hover {
    background: #cef4e2;
  }
}

.dropdown__label {
  height: 2em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-body-lg);
  line-height: 1.3;
}
.dropdown__label h2 {
  font-size: var(--font-body-lg);
}
.dropdown__label-wrapper {
  display: flex;
  gap: var(--gap-sm);
  align-items: center;
}
.dropdown__label-wrapper .dropdown__label {
  flex-grow: 1;
}
.dropdown__checkbox {
  display: block;
  position: relative;
  height: 1em;
  width: 1em;
  margin-top: -0.2em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.dropdown__checkbox input {
  position: absolute;
  cursor: pointer;
  height: 0;
  width: 0;
  visibility: hidden;
}
.dropdown__checkbox .custom-checkbox {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-white);
}
.dropdown__checkbox .icon-checkmark {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .dropdown__checkbox:hover:hover input:not(:disabled) ~ .custom-checkbox {
    background: rgba(255, 255, 255, 0.3215686275);
  }
}
.dropdown__checkbox input:checked ~ .custom-checkbox .icon-checkmark {
  display: block;
}
.dropdown__content {
  box-sizing: border-box;
  overflow: hidden;
  transition: var(--dropdown-transition, height 0.3s ease);
}
.dropdown__content .section-buttons {
  margin-top: var(--space-lg);
}
.dropdown__table {
  margin-bottom: 2em;
}
.dropdown__table:last-child {
  margin-bottom: unset;
}
.dropdown .dropdown-table {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.dropdown .dropdown-table span {
  font-size: var(--font-body-sm);
}
.dropdown .dropdown-table__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-xl);
}
.dropdown .dropdown-table__right-column {
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .dropdown .dropdown-table__right-column {
    text-align: right;
  }
}
.dropdown .dropdown__content-wrapper {
  padding: 1.2rem 0;
  font-size: var(--font-body-sm);
  line-height: 1.2;
}
.dropdown .dropdown__button-expand {
  display: block;
}
.dropdown .dropdown__button-collapse {
  display: none;
}
.dropdown.expanded {
  background: #cef4e2;
}
.dropdown.expanded .dropdown__button-expand {
  display: none;
}
.dropdown.expanded .dropdown__button-collapse {
  display: block;
}

.cookie-banner .dropdown__label {
  font-size: var(--font-body-md);
}
.cookie-banner .dropdown.expanded {
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .cookie-banner .dropdown:hover:hover {
    background: transparent;
  }
}

.section-newsletter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: unset;
  padding: calc(var(--space-lg) * 1.3) var(--space-md);
  background: #89ff00;
  font-size: var(--font-body-md);
  line-height: 1.3;
}
.section-newsletter span {
  max-width: 1100px;
}
@media screen and (max-width: 750px) {
  .section-newsletter {
    flex-direction: column;
    align-items: start;
  }
}

.section-calendar .calendar-list {
  margin-top: var(--space-lg);
}

.section-contact .contact-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.section-contact .contact-table__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--space-md) * 1.5);
}
.section-contact .contact-table__row h2 {
  grid-column: span 4;
  font-size: var(--font-body-lg);
}
@media screen and (max-width: 1024px) {
  .section-contact .contact-table__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--space-md) * 2) calc(var(--space-md) * 1.5);
  }
  .section-contact .contact-table__row h2 {
    grid-column: span 2;
  }
  .section-contact .contact-table__row .contact-card {
    grid-column: span 1;
  }
}
@media screen and (max-width: 750px) {
  .section-contact .contact-table__row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--space-md) * 2.5) calc(var(--space-md) * 1.5);
  }
  .section-contact .contact-table__row h2 {
    grid-column: span 1;
  }
  .section-contact .contact-table__row .contact-card {
    grid-column: span 1;
  }
}

.section-extrainfo {
  margin: var(--space-lg) 0;
}

.section-sponsors .section__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.section-sponsors .section__logo {
  max-width: 15%;
}
@media screen and (max-width: 1440px) {
  .section-sponsors .section__logo {
    max-width: 23%;
  }
}
@media screen and (max-width: 1024px) {
  .section-sponsors .section__logo {
    max-width: 30%;
  }
}
@media screen and (max-width: 750px) {
  .section-sponsors .section__logo {
    max-width: 43%;
  }
}
.section-sponsors .section__logo img {
  max-height: 50px;
}

.section-extrainfo-text {
  padding: 0 var(--space-md);
}
.section-extrainfo-text .section-body-text p,
.section-extrainfo-text .section-body-text a {
  font-size: var(--font-body-xl);
  line-height: 1.2;
}

.section-featured-images {
  padding: 0 var(--space-md);
}

.section-single-button button {
  display: inline;
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .section-single-button button:hover:hover {
    text-decoration: none;
  }
}

.funfact {
  --posX: 30%;
  --posY: 10%;
  --posXM: 12%;
  --posYM: 13%;
  --bg: #9be474;
  --fg: var(--color-black);
  position: absolute;
  top: var(--posY);
  left: var(--posX);
  z-index: 10;
  transition: opacity 0.2s;
  -ms-touch-action: none;
  touch-action: none;
  user-select: none;
}
.funfact--left .funfact__text {
  left: 100%;
}
.funfact--right .funfact__text {
  right: 100%;
}
.funfact--up .funfact__text {
  top: 50%;
  transform: translateY(-50%);
}
.funfact--down .funfact__text {
  bottom: 50%;
  transform: translateY(50%);
}
.funfact__logo-sticker {
  width: 100%;
  width: 140px;
  height: auto;
  opacity: 0;
}
.funfact__logo-sticker svg {
  fill: var(--color-white);
  transition: 0.2s;
}
@media screen and (max-width: 750px) {
  .funfact__logo-sticker {
    width: 110px;
  }
}
.funfact__text {
  position: absolute;
  width: 0;
  padding: 0;
  margin: 0 var(--space-md);
  overflow: hidden;
  background: var(--bg);
  border-radius: var(--radius-md);
  transition: width 0.3s;
}
.funfact__text .funfact__text-wrapper {
  font-size: var(--font-body-xs);
  padding: var(--space-md);
  width: 400px;
  display: flex;
}
.funfact__text p,
.funfact__text a,
.funfact__text i {
  color: var(--fg);
  opacity: 0;
  transition: width 0.1s;
}
.funfact__text a {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .funfact__text a:hover:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 750px) {
  .funfact__text {
    margin: var(--space-md);
  }
  .funfact__text .funfact__text-wrapper {
    width: calc(90vw - var(--space-md) * 2);
  }
}
.funfact.active .funfact__text p,
.funfact.active .funfact__text a,
.funfact.active .funfact__text i {
  opacity: 1;
}
@media screen and (max-width: 750px) {
  .funfact.active svg {
    fill: var(--bg);
  }
  .funfact.active .funfact__text {
    width: calc(90vw - var(--space-md) * 2);
  }
}
.funfact:focus .funfact__text {
  width: 400px;
}
.funfact:focus .funfact__text p,
.funfact:focus .funfact__text a,
.funfact:focus .funfact__text i {
  opacity: 1;
}
.funfact:focus svg {
  fill: var(--bg);
}
@media screen and (max-width: 750px) {
  .funfact:focus .funfact__text {
    width: calc(90vw - var(--space-md) * 2);
  }
}
@media (hover: hover) and (pointer: fine) {
  .funfact:hover:hover .funfact__text {
    width: 400px;
  }
  .funfact:hover:hover .funfact__text p,
  .funfact:hover:hover .funfact__text a,
  .funfact:hover:hover .funfact__text i {
    opacity: 1;
  }
  .funfact:hover:hover svg {
    fill: var(--bg);
  }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 750px) {
  .funfact:hover:hover .funfact__text {
    width: calc(90vw - var(--space-md) * 2);
  }
}
@media screen and (max-width: 750px) {
  .funfact {
    top: var(--posYM);
    left: var(--posXM);
  }
  .funfact--left .funfact__text {
    left: 0;
  }
  .funfact--right .funfact__text {
    right: 0;
  }
  .funfact--up .funfact__text {
    top: 100%;
    transform: unset;
  }
  .funfact--down .funfact__text {
    bottom: 100%;
    transform: unset;
  }
}

.media-explorer,
.calendar-explorer {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: 0 var(--space-md);
}

.calendar-explorer__loading, .calendar-explorer__error, .calendar-explorer__section-buttons {
  padding: 0 var(--space-md);
}

section.media-explorer__results,
section.calendar-explorer__results {
  margin-top: var(--space-xl) !important;
}

section.calendar-explorer__results {
  padding: unset;
}

.media-explorer__content-grid,
.section__content-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xl) var(--gap-sm);
}
@media screen and (max-width: 1280px) {
  .media-explorer__content-grid,
  .section__content-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (max-width: 1024px) {
  .media-explorer__content-grid,
  .section__content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 750px) {
  .media-explorer__content-grid,
  .section__content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 400px) {
  .media-explorer__content-grid,
  .section__content-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.media-explorer__loading.loading {
  font-size: var(--font-body-md);
}
.media-explorer__loading.loading:after {
  font-size: var(--font-body-md);
}

.media-explorer__hw-result {
  display: none;
}
.media-explorer__hw-result.visible {
  display: block;
}
.media-explorer__hw-result section {
  padding: unset;
}

.search-bar__container {
  display: flex;
  padding: var(--gap-xl) var(--space-sm);
  align-items: center;
  border: 1.2px solid var(--color-black);
  border-radius: 6px;
}
.search-bar__reset {
  cursor: pointer;
}
.search-bar input {
  flex-grow: 1;
  width: 100%;
  font-size: var(--font-body-xl);
  padding: 0 var(--space-md);
  padding-top: 0.13em;
}
.search-bar input::placeholder {
  opacity: 0.4;
}
.search-bar svg {
  flex-shrink: 0;
}

.filter {
  display: flex;
  flex-direction: column;
}
.filter__options {
  display: flex;
  align-items: end;
  gap: var(--gap-sm);
}
.filter__options ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap-sm);
}
@media screen and (max-width: 750px) {
  .filter__options {
    flex-direction: column;
    align-items: start;
  }
}
.filter__options-nested {
  margin-top: 0;
  transition: 0.2s;
}
.filter__options-nested.visible {
  margin-top: var(--space-md);
}
.filter__options-nested ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap-sm);
  height: 0;
  transition: 0.2s;
  overflow: hidden;
}
.filter__tags, .filter__tracker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}
.filter__tracker {
  flex-direction: column;
  gap: var(--space-md);
  margin-top: 0;
}
.filter__tracker.visible {
  margin-top: var(--space-md);
}
.filter__result-count {
  font-size: var(--font-body-sm);
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  z-index: 20;
  display: none;
}
.lightbox__header {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: var(--space-md);
}
.lightbox__close {
  cursor: pointer;
}
.lightbox.visible {
  display: block;
}

.slider-program-current,
.slider-program-upcoming {
  display: none;
}
.slider-program-current.visible,
.slider-program-upcoming.visible {
  display: block;
}

.permanent-collection {
  background: #379566;
}
.permanent-collection main h1,
.permanent-collection main h2,
.permanent-collection main h3,
.permanent-collection main h4,
.permanent-collection main h5,
.permanent-collection main h6,
.permanent-collection main p,
.permanent-collection main li,
.permanent-collection main a,
.permanent-collection main span,
.permanent-collection main div {
  color: #d6fde7;
}
.permanent-collection main .section-buttons a {
  border: 1px solid #d6fde7;
}
@media (hover: hover) and (pointer: fine) {
  .permanent-collection main .section-buttons a:hover:hover {
    border: 1px solid transparent;
  }
}
.permanent-collection main .arrow-link {
  border: unset !important;
}
.permanent-collection main .arrow-link svg {
  fill: #d6fde7;
}
@media (hover: hover) and (pointer: fine) {
  .permanent-collection main .arrow-link:hover {
    border: unset !important;
    background-color: transparent;
  }
}

.audio-player {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
  width: 100%;
  max-width: 1600px;
  margin: var(--space-xl) auto;
}
.audio-player__waveform {
  flex: 1;
}
.audio-player__buttons {
  cursor: pointer;
}
.audio-player__button {
  width: 55px;
  stroke: #000;
  stroke-width: 14;
  fill: none;
  display: none;
}
.audio-player__button.play-button {
  fill: #000;
}
.audio-player__button.active {
  display: block;
}
.audio-player__time-wrapper {
  position: relative;
}
.audio-player__time--placeholder {
  visibility: hidden;
  font-feature-settings: "tnum"; /* tabular numbers (optional, better alignment) */
}
.audio-player__time {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/*
▓░▓▓▓▓░░░░▓░░░░▓░░░░░▓
▓░▓▓▓▓░▓▓▓▓░▓▓▓▓▓▓░▓▓▓
▓░▓▓▓▓░░░░▓░░░░▓▓▓░▓▓▓
▓░▓▓▓▓░▓▓▓▓░▓▓▓▓▓▓░▓▓▓
▓░░░░▓░░░░▓░▓▓▓▓▓▓░▓▓▓

░█░░░░░█████░█████░█████░
░█░░░░░█░░░░░▓░░░░░░░█░░░
░█░░░░░█████░▓▓▓▓░░░░█░░░
░█░░░░░█░░░░░▓░░░░░░░█░░░
░█████░█████░▓░░░░░░░█░░░

░█░░░███░███░███░
░█░░░█░░░▓░░░░█░░
░█░░░███░▓▓░░░█░░
░█░░░█░░░▓░░░░█░░
░███░███░▓░░░░█░░

░<░░░<<<░<<<░<<<░
░<░░░<░░░<░░░░<░░
░<░░░<<<░<<░░░<░░
░<░░░<░░░<░░░░<░░
░<<<░<<<░<░░░░<░░

░<<<░░░░<<<<<<░░<<<<<<░░<<<<<░░░
░░<<<░░░░<<<░░░░░<<<░░░░░<<<░░░░░
░░░<<<░░░░<<<<<<░░<<<<<░░░<<<░░░░
░░░░<<<░░░░<<<░░░░░<<<░░░░░<<<░░░
░░░░░<<<<<<░<<<<<<░░<<<░░░░░<<<░░

░<<<░░░░<<<<<<░░<<<<<<░<<<<<<░░░
░░<<<░░░░<<<░░░░░<<<░░░░░<<<░░░░░
░░░<<<░░░░<<<<<<░░<<<<<░░░<<<░░░░
░░░░<<<░░░░<<<░░░░░<<<░░░░░<<<░░░
░░░░░<<<<<<░<<<<<<░░<<<░░░░░<<<░░

|*|░///░░░░//////░░//////░//////░░░|*|
|*|░░///░░░░///░░░░░///░░░░░///░░░░|*|
|*|░░░///░░░░//////░░/////░░░///░░░|*|
|*|░░░░///░░░░///░░░░░///░░░░░///░░|*|
|*|░░░░░//////░//////░░///░░░░░///░|*|

*/
.featured-exhibition-card__footer {
  display: flex;
  gap: var(--space-lg);
}
@media screen and (max-width: 1024px) {
  .featured-exhibition-card__footer {
    flex-direction: column;
    gap: var(--gap-xs);
  }
  .featured-exhibition-card__footer__date {
    order: 0;
  }
}
.featured-exhibition-card__subtitle {
  font-style: italic;
}
@media screen and (max-width: 1024px) {
  .featured-exhibition-card__date {
    order: -1;
  }
}

.calendar-card {
  --fg: #89ff00;
  --bg: #0a4822;
  --fg-card: var(--fg);
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--gap-xl);
  padding: var(--space-sm) var(--space-md);
}
.calendar-card__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.calendar-card__info-time {
  width: 25%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  font-size: var(--font-body-md);
}
@media screen and (max-width: 1440px) {
  .calendar-card__info-time {
    width: 30%;
  }
}
@media screen and (max-width: 1024px) {
  .calendar-card__info-time {
    width: 100%;
    flex-direction: row;
    gap: var(--gap-xl);
  }
}
.calendar-card__title-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
.calendar-card__info {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  gap: var(--gap-lg);
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .calendar-card__info {
    flex-direction: column;
  }
}
.calendar-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  line-height: 1.1;
}
@media screen and (max-width: 1024px) {
  .calendar-card__details {
    gap: var(--gap-lg);
  }
}
.calendar-card__image {
  width: 16%;
  flex-shrink: 0;
  display: block;
}
@media screen and (max-width: 750px) {
  .calendar-card__image {
    width: 20%;
  }
}
.calendar-card__title, .calendar-card__subtitle {
  font-size: var(--font-body-lg);
  word-break: break-word;
  hyphens: auto;
}
.calendar-card__details-text, .calendar-card__type {
  font-size: var(--font-body-xs);
}
.calendar-card .section-buttons a {
  z-index: 1;
}
.calendar-card img {
  aspect-ratio: 5/4;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media screen and (max-width: 750px) {
  .calendar-card img {
    aspect-ratio: 1/1;
  }
}
@media (hover: hover) and (pointer: fine) {
  .calendar-card:hover:hover {
    background: var(--bg);
  }
  .calendar-card:hover:hover li,
  .calendar-card:hover:hover span {
    color: var(--fg);
  }
  .calendar-card:hover:hover a.button {
    color: var(--fg-card);
    border: 1px solid var(--fg-card);
  }
}
@media screen and (max-width: 750px) {
  .calendar-card__info {
    flex-direction: column;
  }
}
@media screen and (max-width: 640px) {
  .calendar-card {
    flex-direction: row-reverse;
    padding: calc(var(--space-md) * 2) var(--space-md);
  }
}

.featured-exhibition-card,
.featured-shop-products-card,
.featured-event-card,
.featured-media-card,
.featured-page-slide-card,
.featured-page-list-card,
.suggested-exhibition-card,
.content-grid-card,
.media-explorer-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}
.featured-exhibition-card a,
.featured-shop-products-card a,
.featured-event-card a,
.featured-media-card a,
.featured-page-slide-card a,
.featured-page-list-card a,
.suggested-exhibition-card a,
.content-grid-card a,
.media-explorer-card a {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.featured-event-card__footer,
.featured-shop-products-card__footer,
.featured-media-card__footer,
.featured-page-slide-card__footer,
.suggested-exhibition-card__footer,
.content-grid-card__footer,
.media-explorer-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.featured-shop-products-card__footer {
  gap: var(--gap-md);
}

.featured-exhibition-card,
.featured-shop-products-card,
.featured-event-card,
.featured-media-card,
.featured-page-slide-card,
.suggested-exhibition-card {
  font-size: var(--font-body-sm);
}
.featured-exhibition-card h3,
.featured-exhibition-card span,
.featured-shop-products-card h3,
.featured-shop-products-card span,
.featured-event-card h3,
.featured-event-card span,
.featured-media-card h3,
.featured-media-card span,
.featured-page-slide-card h3,
.featured-page-slide-card span,
.suggested-exhibition-card h3,
.suggested-exhibition-card span {
  font-size: var(--font-body-sm);
  line-height: 1.2;
}

.featured-media-card {
  position: relative;
}
.featured-media-card__type {
  margin-top: var(--gap-md);
  font-size: var(--font-body-xs) !important;
}
.featured-media-card__graph-overlay {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 5/4;
  width: 100%;
  height: auto;
}
.featured-media-card__graph-overlay .graph {
  position: relative;
  width: 85%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.featured-page-slide-card__header {
  font-size: var(--font-body-lg);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  height: 2.4em;
}
.featured-page-slide-card__header h3 {
  font-size: var(--font-body-lg);
}
.featured-page-slide-card__footer {
  gap: var(--gap-xl);
}

.featured-page-list-card__header {
  width: 95%;
  font-size: var(--font-body-lg);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-height: 1.2;
  height: 1.2em;
}
.featured-page-list-card__header h3 {
  font-size: var(--font-body-lg);
}
.featured-page-list-card img {
  aspect-ratio: 5/4;
  object-fit: cover;
  object-position: center;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.contact-card__role {
  font-size: var(--font-body-md);
  margin-bottom: calc(var(--space-md)) !important;
  word-break: break-word;
  hyphens: auto;
}
.contact-card__name, .contact-card__phone, .contact-card__mobile, .contact-card__email {
  font-size: var(--font-body-sm);
}

.featured-images-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  font-size: var(--font-body-xs);
}
.featured-images-card h3,
.featured-images-card span {
  font-size: var(--font-body-xs);
  line-height: 1.2;
}
.featured-images-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.suggested-exhibition-card__subtitle {
  font-style: italic;
}

.content-grid-card,
.media-explorer-card {
  --fg: #89ff00;
  --bg: #0a4822;
}
.content-grid-card span,
.content-grid-card a,
.media-explorer-card span,
.media-explorer-card a {
  font-size: var(--font-body-xs);
  line-height: 1.2;
}
.content-grid-card__media,
.media-explorer-card__media {
  aspect-ratio: 5/4;
  display: flex;
  padding: 2rem;
  background: var(--bg);
}
.content-grid-card__media .graph,
.media-explorer-card__media .graph {
  stroke-width: 8;
  stroke: var(--fg);
}
.content-grid-card__media--image,
.media-explorer-card__media--image {
  aspect-ratio: unset;
  padding: unset;
}
.content-grid-card__media--media,
.media-explorer-card__media--media {
  aspect-ratio: 5/4;
}
.content-grid-card__media--media img,
.media-explorer-card__media--media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content-grid-card__type,
.media-explorer-card__type {
  font-size: var(--font-body-us) !important;
  margin-top: 0.5em;
}
.content-grid-card__button a,
.media-explorer-card__button a {
  text-decoration: underline;
}

.media-explorer-card {
  position: relative;
}
.media-explorer-card__media .graph,
.media-explorer-card__media img {
  display: none;
}
.media-explorer-card__media .graph.visible,
.media-explorer-card__media img.visible {
  display: block;
}
.media-explorer-card__media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
}

.lightbox-card {
  position: relative;
}
.lightbox-card__image-wrapper {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.lightbox-card__image-wrapper img {
  flex-grow: 1;
}
.lightbox-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: center;
}
.lightbox-card__footer span {
  font-size: var(--font-body-sm);
  color: var(--color-black) !important;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes fade-out-top {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes fade-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fade-out-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
.delay-1 {
  transition-delay: 0.1s !important;
}

.delay-2 {
  transition-delay: 0.2s !important;
}

.delay-3 {
  transition-delay: 0.3s !important;
}

.delay-4 {
  transition-delay: 0.4s !important;
}

.delay-5 {
  transition-delay: 0.5s !important;
}

.delay-6 {
  transition-delay: 0.6s !important;
}

.delay-7 {
  transition-delay: 0.7s !important;
}

.delay-8 {
  transition-delay: 0.8s !important;
}

.delay-9 {
  transition-delay: 0.9s !important;
}

.delay-10 {
  transition-delay: 1s !important;
}

.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: var(--color-transition);
  opacity: 0;
  transform: translate3d(0, calc(-100% * var(--overlay-direction, 1)), 0);
  pointer-events: none;
}

/* Slightly move main content */
html.is-changing .transition-overlay {
  transition: transform 400ms ease-in-out;
  opacity: 1;
}

html.is-animating .transition-overlay {
  transform: translate3d(0, 0, 0);
}

html.is-rendering .transition-overlay {
  transform: translate3d(0, calc(var(--overlay-direction, 1) * 100%), 0);
}

html.to-back {
  /* --overlay-direction: -1; */
}

.accessibility-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  display: none;
}

.accessibility-spotlight {
  display: none;
}

.accessibility-cursor {
  width: 100px;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-image: url("../img/accessibility-cursor.png");
  background-position: start center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  display: none;
}

.accessibility-highlightTitle h1,
.accessibility-highlightTitle h2,
.accessibility-highlightTitle h3,
.accessibility-highlightTitle h4,
.accessibility-highlightTitle h5,
.accessibility-highlightTitle h6 {
  border: var(--color-highlight) 2px solid;
}

.accessibility-highlightLinks a {
  border: var(--color-highlight) 2px solid;
}

.accessibility-moreLineSpace * {
  line-height: 2em !important;
}

.accessibility-moreLetterSpace * {
  letter-spacing: 0.1em;
}

.accessibility-darkerContrast p,
.accessibility-darkerContrast h1,
.accessibility-darkerContrast h2,
.accessibility-darkerContrast h3,
.accessibility-darkerContrast h4,
.accessibility-darkerContrast h5,
.accessibility-darkerContrast h6,
.accessibility-darkerContrast span,
.accessibility-darkerContrast a {
  background-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white) !important;
  fill: var(--color-white);
}
.accessibility-darkerContrast p svg,
.accessibility-darkerContrast h1 svg,
.accessibility-darkerContrast h2 svg,
.accessibility-darkerContrast h3 svg,
.accessibility-darkerContrast h4 svg,
.accessibility-darkerContrast h5 svg,
.accessibility-darkerContrast h6 svg,
.accessibility-darkerContrast span svg,
.accessibility-darkerContrast a svg {
  fill: var(--color-white);
  background: var(--color-black);
}

.accessibility-lighterContrast p,
.accessibility-lighterContrast h1,
.accessibility-lighterContrast h2,
.accessibility-lighterContrast h3,
.accessibility-lighterContrast h4,
.accessibility-lighterContrast h5,
.accessibility-lighterContrast h6,
.accessibility-lighterContrast span,
.accessibility-lighterContrast a {
  background-color: var(--color-white) !important;
  background: var(--color-white);
  color: var(--color-black) !important;
  fill: var(--color-black);
}
.accessibility-lighterContrast p svg,
.accessibility-lighterContrast h1 svg,
.accessibility-lighterContrast h2 svg,
.accessibility-lighterContrast h3 svg,
.accessibility-lighterContrast h4 svg,
.accessibility-lighterContrast h5 svg,
.accessibility-lighterContrast h6 svg,
.accessibility-lighterContrast span svg,
.accessibility-lighterContrast a svg {
  fill: var(--color-black);
  background: var(--color-white);
}
.accessibility-lighterContrast .accessibility-item__toggle.checked {
  border: var(--color-black) 3px solid;
}

.accessibility-highContrast .accessibility-overlay {
  display: block;
  backdrop-filter: contrast(200%);
}

.accessibility-highSaturation .accessibility-overlay {
  display: block;
  backdrop-filter: saturate(200%);
}

.accessibility-littleSaturation .accessibility-overlay {
  display: block;
  backdrop-filter: saturate(50%);
}

.accessibility-monochromatic .accessibility-overlay {
  display: block;
  backdrop-filter: grayscale(1);
}

.accessibility-monochromatic .accessibility-overlay {
  display: block;
  backdrop-filter: grayscale(1);
}

.accessibility-readingGuide .accessibility-spotlight {
  display: block;
  position: fixed;
  left: 0;
  top: 50px;
  width: 100vw;
  height: 7vh;
  /* Darken everything else with a massive spread shadow */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  pointer-events: none; /* don't block clicks */
  z-index: 9999;
}

.accessibility-noAnimations * {
  animation: none !important;
  transition: none !important;
}

.accessibility-bigCursor {
  cursor: none;
}
.accessibility-bigCursor * {
  cursor: none;
}
.accessibility-bigCursor .accessibility-cursor {
  display: block;
}

.accessibility-invert .icon-toggle .light {
  display: initial;
}
.accessibility-invert .icon-toggle .dark {
  display: none;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--main-font), serif;
  font-size: var(--font-body-md);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
main {
  --scrollBarBg: var(--color-white);
  --scrollBarFg: #0f7407;
  scrollbar-color: var(--scrollBarFg) var(--scrollBarBg);
}

body,
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all 0.5s ease-in-out;
  background-color: var(--color-bg);
}

body {
  --selectFg: var(--color-white);
  --selectBg: #0f7407;
}

::-moz-selection {
  color: var(--selectFg);
  background: var(--selectBg);
}

::selection {
  color: var(--selectFg);
  background: var(--selectBg);
}

.text-body-xs,
.text-body-sm,
.text-body-md,
.text-body-lg,
.text-body-xl,
.text-body-ul {
  font-family: var(--body-font), sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-display-xs,
.text-display-sm,
.text-display-md,
.text-display-lg,
.text-display-xl,
.text-display-ul {
  font-family: var(--display-font), sans-serif;
  font-weight: 400;
}

.text-body-us {
  font-size: var(--font-body-us);
}

.text-body-xs {
  font-size: var(--font-body-xs);
}

.text-body-sm {
  font-size: var(--font-body-sm);
}

.text-body-md {
  font-size: var(--font-body-md);
}

.text-body-lg {
  font-size: var(--font-body-lg);
}

.text-body-xl {
  font-size: var(--font-body-xl);
}

.text-body-ul {
  font-size: var(--font-body-ul);
}

.text-display-xs {
  font-size: var(--font-display-xs);
}

.text-display-sm {
  font-size: var(--font-display-sm);
}

.text-display-md {
  font-size: var(--font-display-md);
}

.text-display-lg {
  font-size: var(--font-display-lg);
}

.text-display-xl {
  font-size: var(--font-display-xl);
}

.text-display-ul {
  font-size: var(--font-display-ul);
}

p {
  margin: 1em 0;
}
p:first-of-type {
  margin-top: unset;
}
p:last-of-type {
  margin-bottom: unset;
}

p,
span,
a,
li,
strong,
em,
i {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.1s ease;
}

strong {
  font-weight: 400;
  background: #89ff00;
}

/* all sides */
.b-sm {
  border: var(--outline-sm);
}

.b-md {
  border: var(--outline-md);
}

.b-lg {
  border: var(--outline-lg);
}

/* top */
.bt-sm {
  border-top: var(--outline-sm);
}

.bt-md {
  border-top: var(--outline-md);
}

.bt-lg {
  border-top: var(--outline-lg);
}

/* right */
.br-sm {
  border-right: var(--outline-sm);
}

.br-md {
  border-right: var(--outline-md);
}

.br-lg {
  border-right: var(--outline-lg);
}

/* bottom */
.bb-sm {
  border-bottom: var(--outline-sm);
}

.bb-md {
  border-bottom: var(--outline-md);
}

.bb-lg {
  border-bottom: var(--outline-lg);
}

/* left */
.bl-sm {
  border-left: var(--outline-sm);
}

.bl-md {
  border-left: var(--outline-md);
}

.bl-lg {
  border-left: var(--outline-lg);
}

.radius-1 {
  border-radius: var(--radius-1);
}

.radius-2 {
  border-radius: var(--radius-2);
}

.radius-round {
  border-radius: var(--radius-round);
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  font-size: 10px;
  width: 100%;
}

img[src=""],
img:not([src]) {
  --bg: transparent;
  background: var(--bg);
  border: 1px solid var(--bg);
}

.icon {
  width: var(--icon-md);
  stroke: #000;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icon--sm {
  width: var(--icon-sm);
}
.icon--lg {
  width: var(--icon-lg) !important;
  height: auto !important;
}
.icon--xl {
  width: var(--icon-xl) !important;
  height: auto !important;
}

.icon-inline {
  height: 0.6em;
  stroke: #000;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-checkmark {
  width: 100%;
  height: 100%;
}

.logo {
  width: 100%;
  max-width: 180px;
  min-width: 150px;
}
.logo--umweltzeichen {
  width: 100%;
  max-width: 210px;
  min-width: 200px;
}
.logo--stadtwien {
  fill: var(--color-white);
  min-width: 70px;
  max-width: 90px;
}
.logo--wienholding {
  fill: var(--color-white);
  min-width: 70px;
  max-width: 100px;
}

.graph {
  stroke: #9be573;
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: round;
  fill: none;
  width: 100%;
}

.desktop-lg {
  display: block;
}
@media screen and (max-width: 1280px) {
  .desktop-lg {
    display: none;
  }
}

.desktop-md {
  display: block;
}
@media screen and (max-width: 1024px) {
  .desktop-md {
    display: none;
  }
}

.desktop-sm {
  display: block;
}
@media screen and (max-width: 750px) {
  .desktop-sm {
    display: none;
  }
}

.mobile-lg {
  display: none;
}
@media screen and (max-width: 1280px) {
  .mobile-lg {
    display: block;
  }
}

.mobile-md {
  display: none;
}
@media screen and (max-width: 1024px) {
  .mobile-md {
    display: block;
  }
}

.mobile-sm {
  display: none;
}
@media screen and (max-width: 750px) {
  .mobile-sm {
    display: block;
  }
}

.mobile-xs {
  display: none;
}
@media screen and (max-width: 640px) {
  .mobile-xs {
    display: block;
  }
}

/*# sourceMappingURL=main.css.map */