/* Variables */
:root {
  --container-default:1400px;
  --container-small:960px;
  --container-large:1920px;

  --section-padding-y:clamp(64px, 128px, 12vh);
  --section-padding-x:clamp(16px, 32px, 4vw);

  --col-count:12;
  --col-gap-x:clamp(16px, 32px, 2rem);
  --col-gap-y:clamp(16px, 32px, 2rem);

  --space-xxs:0.5rem; /* 8px */
  --space-xs:1rem;    /* 16px */
  --space-s:1.5rem;   /* 24px */
  --space-m:2rem;     /* 32px */
  --space-l:2.5rem;   /* 40px */
  --space-xl:4rem;    /* 64px */
  --space-xxl:5rem;   /* 80px */

  --border-radius-s:0.5rem;
  --border-radius-m:1rem;
  --border-radius-l:1.5rem;
  --border-radius-xl:2rem;
}

/* Layout */
.section {width:100%; padding:var(--section-padding-y) var(--section-padding-x); position:relative;}

.section.pt-0 {padding-top:0;}
.section.pb-0 {padding-bottom:0;}
.section.py-0 {padding-top:0; padding-bottom:0;}
.section.px-0 {padding-left:0; padding-right:0;}

/* Container */
.container {width:100%; max-width:var(--container-default); margin-inline:auto;}
.container.small {max-width:var(--container-small);}
.container.large {max-width:var(--container-large);}
.container.full {max-width:100%;}

/* Row */
.row {display:grid; grid-template-columns:repeat(var(--col-count), minmax(0, 1fr)); column-gap:var(--col-gap-x); row-gap:var(--col-gap-y); align-items:start;}

.row.gap-0 {gap:0;}
.row.gap-xxs {gap:var(--space-xxs);}
.row.gap-xs {gap:var(--space-xs);}
.row.gap-s {gap:var(--space-s);}
.row.gap-m {gap:var(--space-m);}
.row.gap-l {gap:var(--space-l);}
.row.gap-xl {gap:var(--space-xl);}
.row.gap-xxl {gap:var(--space-xxl);}

.row.v-start {align-items:start;}
.row.v-center {align-items:center;}
.row.v-end {align-items:end;}
.row.v-stretch {align-items:stretch;}

.row.h-start {justify-content:start;}
.row.h-center {justify-content:center;}
.row.h-end {justify-content:end;}
.row.h-between {justify-content:space-between;}

/* Col */
.col {grid-column:span var(--col-count); min-width:0;}

.col-1 {grid-column:span 1;}
.col-2 {grid-column:span 2;}
.col-3 {grid-column:span 3;}
.col-4 {grid-column:span 4;}
.col-5 {grid-column:span 5;}
.col-6 {grid-column:span 6;}
.col-7 {grid-column:span 7;}
.col-8 {grid-column:span 8;}
.col-9 {grid-column:span 9;}
.col-10 {grid-column:span 10;}
.col-11 {grid-column:span 11;}
.col-12 {grid-column:span 12;}

/* Grid utilities */
.col-2.center {grid-column:6 / span 2;}
.col-4.center {grid-column:5 / span 4;}
.col-6.center {grid-column:4 / span 6;}
.col-8.center {grid-column:3 / span 8;}
.col-10.center {grid-column:2 / span 10;}

.col-offset-1 {grid-column-start:2;}
.col-offset-2 {grid-column-start:3;}
.col-offset-3 {grid-column-start:4;}
.col-offset-4 {grid-column-start:5;}
.col-offset-5 {grid-column-start:6;}
.col-offset-6 {grid-column-start:7;}

/* Margin utilities */
.m-0 {margin:0;}

.mt-0 {margin-top:0;}
.mb-0 {margin-bottom:0;}
.ml-0 {margin-left:0;}
.mr-0 {margin-right:0;}

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

.mt-0 {margin-top:0;}
.mt-auto {margin-top:auto;}
.mt-xxs {margin-top:var(--space-xxs);}
.mt-xs {margin-top:var(--space-xs);}
.mt-s {margin-top:var(--space-s);}
.mt-m {margin-top:var(--space-m);}
.mt-l {margin-top:var(--space-l);}
.mt-xl {margin-top:var(--space-xl);}
.mt-xxl {margin-top:var(--space-xxl);}

.mb-0 {margin-bottom:0;}
.mb-auto {margin-bottom:auto;}
.mb-xxs {margin-bottom:var(--space-xxs);}
.mb-xs {margin-bottom:var(--space-xs);}
.mb-s {margin-bottom:var(--space-s);}
.mb-m {margin-bottom:var(--space-m);}
.mb-l {margin-bottom:var(--space-l);}
.mb-xl {margin-bottom:var(--space-xl);}
.mb-xxl {margin-bottom:var(--space-xxl);}

.ml-auto {margin-left:auto;}
.ml-xxs {margin-left:var(--space-xxs);}
.ml-xs {margin-left:var(--space-xs);}
.ml-s {margin-left:var(--space-s);}
.ml-m {margin-left:var(--space-m);}
.ml-l {margin-left:var(--space-l);}
.ml-xl {margin-left:var(--space-xl);}
.ml-xxl {margin-left:var(--space-xxl);}

.mr-auto {margin-right:auto;}
.mr-xxs {margin-right:var(--space-xxs);}
.mr-xs {margin-right:var(--space-xs);}
.mr-s {margin-right:var(--space-s);}
.mr-m {margin-right:var(--space-m);}
.mr-l {margin-right:var(--space-l);}
.mr-xl {margin-right:var(--space-xl);}
.mr-xxl {margin-right:var(--space-xxl);}

.mx-xxs {margin-left:var(--space-xxs); margin-right:var(--space-xxs);}
.mx-xs {margin-left:var(--space-xs); margin-right:var(--space-xs);}
.mx-s {margin-left:var(--space-s); margin-right:var(--space-s);}
.mx-m {margin-left:var(--space-m); margin-right:var(--space-m);}
.mx-l {margin-left:var(--space-l); margin-right:var(--space-l);}
.mx-xl {margin-left:var(--space-xl); margin-right:var(--space-xl);}
.mx-xxl {margin-left:var(--space-xxl); margin-right:var(--space-xxl);}

.my-xxs {margin-top:var(--space-xxs); margin-bottom:var(--space-xxs);}
.my-xs {margin-top:var(--space-xs); margin-bottom:var(--space-xs);}
.my-s {margin-top:var(--space-s); margin-bottom:var(--space-s);}
.my-m {margin-top:var(--space-m); margin-bottom:var(--space-m);}
.my-l {margin-top:var(--space-l); margin-bottom:var(--space-l);}
.my-xl {margin-top:var(--space-xl); margin-bottom:var(--space-xl);}
.my-xxl {margin-top:var(--space-xxl); margin-bottom:var(--space-xxl);}

.mt-n-xxs {margin-top:calc(var(--space-xxs) * -1);}
.mt-n-xs {margin-top:calc(var(--space-xs) * -1);}
.mt-n-s {margin-top:calc(var(--space-s) * -1);}
.mt-n-m {margin-top:calc(var(--space-m) * -1);}
.mt-n-l {margin-top:calc(var(--space-l) * -1);}
.mt-n-xl {margin-top:calc(var(--space-xl) * -1);}
.mt-n-xxl {margin-top:calc(var(--space-xxl) * -1);}

/* Padding utilities */
.p-0 {padding:0;}

.pt-0 {padding-top:0;}
.pb-0 {padding-bottom:0;}
.pl-0 {padding-left:0;}
.pr-0 {padding-right:0;}

.p-xxs {padding:var(--space-xxs);}
.p-xs {padding:var(--space-xs);}
.p-s {padding:var(--space-s);}
.p-m {padding:var(--space-m);}
.p-l {padding:var(--space-l);}
.p-xl {padding:var(--space-xl);}
.p-xxl {padding:var(--space-xxl);}

.px-xxs {padding-left:var(--space-xxs); padding-right:var(--space-xxs);}
.px-xs {padding-left:var(--space-xs); padding-right:var(--space-xs);}
.px-s {padding-left:var(--space-s); padding-right:var(--space-s);}
.px-m {padding-left:var(--space-m); padding-right:var(--space-m);}
.px-l {padding-left:var(--space-l); padding-right:var(--space-l);}
.px-xl {padding-left:var(--space-xl); padding-right:var(--space-xl);}
.px-xxl {padding-left:var(--space-xxl); padding-right:var(--space-xxl);}

.py-xxs {padding-top:var(--space-xxs); padding-bottom:var(--space-xxs);}
.py-xs {padding-top:var(--space-xs); padding-bottom:var(--space-xs);}
.py-s {padding-top:var(--space-s); padding-bottom:var(--space-s);}
.py-m {padding-top:var(--space-m); padding-bottom:var(--space-m);}
.py-l {padding-top:var(--space-l); padding-bottom:var(--space-l);}
.py-xl {padding-top:var(--space-xl); padding-bottom:var(--space-xl);}
.py-xxl {padding-top:var(--space-xxl); padding-bottom:var(--space-xxl);}

/* Border radius */
.radius-s {border-radius:var(--border-radius-s);}
.radius-m {border-radius:var(--border-radius-m);}
.radius-l {border-radius:var(--border-radius-l);}
.radius-xl {border-radius:var(--border-radius-xl);}
.radius-round {border-radius:9999px;}
.radius-0 {border-radius:0;}

/* Position */
.relative {position:relative;}
.absolute {position:absolute;}
.fixed {position:fixed;}
.sticky {position:sticky;}

/* Display */
.block {display:block;}
.inline-block {display:inline-block;}
.flex {display:flex;}
.inline-flex {display:inline-flex;}
.grid {display:grid;}
.hidden {display:none;}

/* Flex utilities */
.flex-column {flex-direction:column;}
.flex-wrap {flex-wrap:wrap;}

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

.justify-start {justify-content:flex-start;}
.justify-center {justify-content:center;}
.justify-end {justify-content:flex-end;}
.justify-between {justify-content:space-between;}

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

/* Tablet — ≤ 1024px */
@media (max-width:1024px) {

  .col-3,
  .col-4 {grid-column:span 6;}

  .col-5,
  .col-7 {grid-column:span 6;}

  .col[class*="col-offset-"],
  .center {grid-column-start:auto;}
}

/* Mobile — ≤ 768px */
@media (max-width:768px) {

  .row {grid-template-columns:1fr;}

  .col[class*="col-"] {grid-column:span 1;}

  .col[class*="center"] {grid-column:span 1;}
}