:root {
  --content-width: 1200px;
  /* Spaces */
  --space-xs: clamp(0.8441720333rem, calc(-0.0206451427vw + 0.8488171904rem), 0.8333333333rem);
  --space-s: clamp(1.1252813203rem, calc(0.2375593898vw + 1.0718304576rem), 1.25rem);
  --space-m: clamp(1.5rem, calc(0.7142857143vw + 1.3392857143rem), 1.875rem);
  --space-l: clamp(1.9995rem, calc(1.5485714286vw + 1.6510714286rem), 2.8125rem);
  --space-xl: clamp(2.6653335rem, calc(2.9588885714vw + 1.9995835714rem), 4.21875rem);
  --space-xxl: clamp(3.5528895555rem, calc(5.2861627514vw + 2.3635029364rem), 6.328125rem);
  /* Font Sizes */
  --text-xs: 0.5627813555rem;
  --text-s: 0.7501875469rem;
  --text-m: 1rem;
  --text-l: 1.333rem;
  --text-xl: 1.776889rem;
  --text-xxl: 2.368593037rem;
  --h6: 0.7034766944rem;
  --h5: 0.9377344336rem;
  --h4: 1.25rem;
  --h3: 1.66625rem;
  --h2: 2.22111125rem;
  --h1: 2.9607412963rem;
  /* Grid */
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  /* Grid Auto */
  --grid-auto-2: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7,
          (100% - (2 - 1) * var(--grid-gap)) / 2
        )
      ),
      1fr
    )
  );
  --grid-auto-3: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7,
          (100% - (3 - 1) * var(--grid-gap)) / 3
        )
      ),
      1fr
    )
  );
  --grid-auto-4: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7,
          (100% - (4 - 1) * var(--grid-gap)) / 4
        )
      ),
      1fr
    )
  );
  --grid-auto-5: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7,
          (100% - (5 - 1) * var(--grid-gap)) / 5
        )
      ),
      1fr
    )
  );
  --grid-auto-6: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7,
          (100% - (6 - 1) * var(--grid-gap)) / 6
        )
      ),
      1fr
    )
  );
  --grid-auto-7: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7,
          (100% - (7 - 1) * var(--grid-gap)) / 7
        )
      ),
      1fr
    )
  );
  --grid-auto-8: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7,
          (100% - (8 - 1) * var(--grid-gap)) / 8
        )
      ),
      1fr
    )
  );
  --grid-auto-9: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7,
          (100% - (9 - 1) * var(--grid-gap)) / 9
        )
      ),
      1fr
    )
  );
  --grid-auto-10: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7,
          (100% - (10 - 1) * var(--grid-gap)) / 10
        )
      ),
      1fr
    )
  );
  --grid-auto-11: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7,
          (100% - (11 - 1) * var(--grid-gap)) / 11
        )
      ),
      1fr
    )
  );
  --grid-auto-12: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7,
          (100% - (12 - 1) * var(--grid-gap)) / 12
        )
      ),
      1fr
    )
  );
}

/* ------------------------------------ */
/* --- Utility Classes --- */
/* ---------------------------------- */
.padding-y-0 {
  padding-block: 0;
}

/* Clickable Parent */

.clickable-parent:not(a) {
  position: static;
}

.clickable-parent:not(a) a {
  position: static;
}

/* .clickable-parent:not(a) > a::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
  z-index: 1;
} */

.clickable-parent::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
  z-index: 1;
}

/* ------------------------------------ */
/* --- Layout --- */
/* ---------------------------------- */
:where(.section) :where(section, div.wrapper) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

:where(
  :where(section, div.wrapper):not(:where(section, div.wrapper) :where(section, div.wrapper))
) {
  padding-block: var(--space-xl);
  padding-inline: var(--space-s);
}

:where(.container) {
  width: var(--content-width);
  max-width: 100%;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}
