@import url('variables.css');

:root {
  --space-unit: 1rem;

  --space-xs: calc(0.25 * var(--space-unit));
  --space-sm: calc(0.5 * var(--space-unit));
  --space-md: var(--space-unit);
  --space-lg: calc(1.5 * var(--space-unit));
  --space-xl: calc(2 * var(--space-unit));
  --space-2xl: calc(3 * var(--space-unit));
  --space-3xl: calc(4 * var(--space-unit));
  --space-4xl: calc(6 * var(--space-unit));
  --space-5xl: calc(8 * var(--space-unit));
  --space-6xl: calc(12 * var(--space-unit));

  --grid-column-width: calc(
    (
        (
          100vw - (2 * var(--gutter-external)) -
            ((var(--number-of-columns) - 1) * var(--gutter-internal))
        )
      ) / var(--number-of-columns)
  );

  --column-width-1: var(--grid-column-width);
  --column-width-2: calc(2 * var(--grid-column-width) + var(--gutter-internal));
  --column-width-3: calc(3 * var(--grid-column-width) + (2 * var(--gutter-internal)));
  --column-width-4: calc(4 * var(--grid-column-width) + (3 * var(--gutter-internal)));
  --column-width-5: calc(5 * var(--grid-column-width) + (4 * var(--gutter-internal)));
  --column-width-6: calc(6 * var(--grid-column-width) + (5 * var(--gutter-internal)));
}

/* -------------- */
/* MARGIN */
/* -------------- */

/* X AXIS */

.no-margin-x {
  margin-right: 0;
  margin-left: 0;
}

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

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

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

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

.margin-x-2xl {
  margin-right: var(--space-2xl);
  margin-left: var(--space-2xl);
}

.margin-x-3xl {
  margin-right: var(--space-3xl);
  margin-left: var(--space-3xl);
}

.margin-x-4xl {
  margin-right: var(--space-4xl);
  margin-left: var(--space-4xl);
}

.margin-x-5xl {
  margin-right: var(--space-5xl);
  margin-left: var(--space-5xl);
}

.margin-x-6xl {
  margin-right: var(--space-6xl);
  margin-left: var(--space-6xl);
}

/* Y AXIS */

.no-margin-y {
  margin-top: 0;
  margin-bottom: 0;
}

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

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

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

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

.margin-y-2xl {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.margin-y-3xl {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.margin-y-4xl {
  margin-top: var(--space-4xl);
  margin-bottom: var(--space-4xl);
}

.margin-y-5xl {
  margin-top: var(--space-5xl);
  margin-bottom: var(--space-5xl);
}

.margin-y-6xl {
  margin-top: var(--space-6xl);
  margin-bottom: var(--space-6xl);
}

/* TOP */

.no-margin-top {
  margin-top: 0;
}

.margin-top-sm {
  margin-top: var(--space-sm);
}
.margin-top-md {
  margin-top: var(--space-md);
}
.margin-top-lg {
  margin-top: var(--space-lg);
}
.margin-top-xl {
  margin-top: var(--space-xl);
}
.margin-top-2xl {
  margin-top: var(--space-2xl);
}
.margin-top-3xl {
  margin-top: var(--space-3xl);
}
.margin-top-4xl {
  margin-top: var(--space-4xl);
}
.margin-top-5xl {
  margin-top: var(--space-5xl);
}
.margin-top-6xl {
  margin-top: var(--space-6xl);
}

/* BOTTOM */

.no-margin-bottom {
  margin-bottom: 0;
}

.margin-bottom-sm {
  margin-bottom: var(--space-sm);
}
.margin-bottom-md {
  margin-bottom: var(--space-md);
}
.margin-bottom-lg {
  margin-bottom: var(--space-lg);
}
.margin-bottom-xl {
  margin-bottom: var(--space-xl);
}
.margin-bottom-2xl {
  margin-bottom: var(--space-2xl);
}
.margin-bottom-3xl {
  margin-bottom: var(--space-3xl);
}
.margin-bottom-4xl {
  margin-bottom: var(--space-4xl);
}
.margin-bottom-5xl {
  margin-bottom: var(--space-5xl);
}
.margin-bottom-6xl {
  margin-bottom: var(--space-6xl);
}

/* LEFT */

.no-margin-left {
  margin-left: 0;
}

.margin-left-gutter {
  margin-left: var(--gutter-internal);
}

.margin-left-sm {
  margin-left: var(--space-sm);
}
.margin-left-md {
  margin-left: var(--space-md);
}
.margin-left-lg {
  margin-left: var(--space-lg);
}
.margin-left-xl {
  margin-left: var(--space-xl);
}
.margin-left-2xl {
  margin-left: var(--space-2xl);
}
.margin-left-3xl {
  margin-left: var(--space-3xl);
}
.margin-left-4xl {
  margin-left: var(--space-4xl);
}
.margin-left-5xl {
  margin-left: var(--space-5xl);
}
.margin-left-6xl {
  margin-left: var(--space-6xl);
}

/* RIGHT */

.no-margin-right {
  margin-right: 0;
}

.margin-right-sm {
  margin-right: var(--space-sm);
}
.margin-right-md {
  margin-right: var(--space-md);
}
.margin-right-lg {
  margin-right: var(--space-lg);
}
.margin-right-xl {
  margin-right: var(--space-xl);
}
.margin-right-2xl {
  margin-right: var(--space-2xl);
}
.margin-right-3xl {
  margin-right: var(--space-3xl);
}
.margin-right-4xl {
  margin-right: var(--space-4xl);
}
.margin-right-5xl {
  margin-right: var(--space-5xl);
}
.margin-right-6xl {
  margin-right: var(--space-6xl);
}

/* -------------- */
/* PADDING */
/* -------------- */

/* X AXIS */

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

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

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

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

.padding-x-2xl {
  padding-right: var(--space-2xl);
  padding-left: var(--space-2xl);
}

.padding-x-3xl {
  padding-right: var(--space-3xl);
  padding-left: var(--space-3xl);
}

.padding-x-4xl {
  padding-right: var(--space-4xl);
  padding-left: var(--space-4xl);
}

.padding-x-5xl {
  padding-right: var(--space-5xl);
  padding-left: var(--space-5xl);
}

.padding-x-6xl {
  padding-right: var(--space-6xl);
  padding-left: var(--space-6xl);
}

/* Y AXIS */

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

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

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

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

.padding-y-2xl {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.padding-y-3xl {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.padding-y-4xl {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

.padding-y-5xl {
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
}

.padding-y-6xl {
  padding-top: var(--space-6xl);
  padding-bottom: var(--space-6xl);
}

/* TOP */

.padding-top-sm {
  padding-top: var(--space-sm);
}
.padding-top-md {
  padding-top: var(--space-md);
}
.padding-top-lg {
  padding-top: var(--space-lg);
}
.padding-top-xl {
  padding-top: var(--space-xl);
}
.padding-top-2xl {
  padding-top: var(--space-2xl);
}
.padding-top-3xl {
  padding-top: var(--space-3xl);
}
.padding-top-4xl {
  padding-top: var(--space-4xl);
}
.padding-top-5xl {
  padding-top: var(--space-5xl);
}
.padding-top-6xl {
  padding-top: var(--space-6xl);
}

/* BOTTOM */

.padding-bottom-sm {
  padding-bottom: var(--space-sm);
}
.padding-bottom-md {
  padding-bottom: var(--space-md);
}
.padding-bottom-lg {
  padding-bottom: var(--space-lg);
}
.padding-bottom-xl {
  padding-bottom: var(--space-xl);
}
.padding-bottom-2xl {
  padding-bottom: var(--space-2xl);
}
.padding-bottom-3xl {
  padding-bottom: var(--space-3xl);
}
.padding-bottom-4xl {
  padding-bottom: var(--space-4xl);
}
.padding-bottom-5xl {
  padding-bottom: var(--space-5xl);
}
.padding-bottom-6xl {
  padding-bottom: var(--space-6xl);
}

/* LEFT */

.padding-left-sm {
  padding-left: var(--space-sm);
}
.padding-left-md {
  padding-left: var(--space-md);
}
.padding-left-lg {
  padding-left: var(--space-lg);
}
.padding-left-xl {
  padding-left: var(--space-xl);
}
.padding-left-2xl {
  padding-left: var(--space-2xl);
}
.padding-left-3xl {
  padding-left: var(--space-3xl);
}
.padding-left-4xl {
  padding-left: var(--space-4xl);
}
.padding-left-5xl {
  padding-left: var(--space-5xl);
}
.padding-left-6xl {
  padding-left: var(--space-6xl);
}

/* RIGHT */

.padding-right-sm {
  padding-right: var(--space-sm);
}
.padding-right-md {
  padding-right: var(--space-md);
}
.padding-right-lg {
  padding-right: var(--space-lg);
}
.padding-right-xl {
  padding-right: var(--space-xl);
}
.padding-right-2xl {
  padding-right: var(--space-2xl);
}
.padding-right-3xl {
  padding-right: var(--space-3xl);
}
.padding-right-4xl {
  padding-right: var(--space-4xl);
}
.padding-right-5xl {
  padding-right: var(--space-5xl);
}
.padding-right-6xl {
  padding-right: var(--space-6xl);
}

/* -------------- */
/* LAYOUT */
/* -------------- */

.flex {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gap-gutter {
  gap: var(--gutter-internal);
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.column-1 {
  width: var(--column-width-1);
}

.column-2 {
  width: var(--column-width-2);
}

.column-3 {
  width: var(--column-width-3);
}

.column-4 {
  width: var(--column-width-4);
}

.column-5 {
  width: var(--column-width-5);
}

.column-6 {
  width: var(--column-width-6);
}

/* TABLET */
@media screen and (min-width: 769px) {
  :root {
    --column-width-7: calc(7 * var(--grid-column-width) + (6 * var(--gutter-internal)));
    --column-width-8: calc(8 * var(--grid-column-width) + (7 * var(--gutter-internal)));
    --column-width-9: calc(9 * var(--grid-column-width) + (8 * var(--gutter-internal)));
  }

  .no-margin-left\@tablet {
    margin-left: 0;
  }

  .margin-left-gutter\@tablet {
    margin-left: var(--gutter-internal);
  }

  .flex\@tablet {
    display: flex;
  }

  .flex--align-start\@tablet {
    align-items: start;
  }

  .flex--align-center\@tablet {
    align-items: center;
  }

  .flex--align-end\@tablet {
    align-items: end;
  }

  .flex--row\@tablet {
    flex-direction: row;
  }

  .flex--column\@tablet {
    flex-direction: column;
  }

  .order-1\@tablet {
    order: 1;
  }

  .order-2\@tablet {
    order: 2;
  }

  .order-3\@tablet {
    order: 3;
  }

  .column-7 {
    width: var(--column-width-7);
  }

  .column-8 {
    width: var(--column-width-8);
  }

  .column-9 {
    width: var(--column-width-9);
  }

  .column-1\@tablet {
    width: var(--column-width-1);
  }

  .column-2\@tablet {
    width: var(--column-width-2);
  }

  .column-3\@tablet {
    width: var(--column-width-3);
  }

  .column-4\@tablet {
    width: var(--column-width-4);
  }

  .column-5\@tablet {
    width: var(--column-width-5);
  }

  .column-6\@tablet {
    width: var(--column-width-6);
  }

  .column-7\@tablet {
    width: var(--column-width-7);
  }

  .column-8\@tablet {
    width: var(--column-width-8);
  }

  .column-9\@tablet {
    width: var(--column-width-9);
  }
}

/* DESKTOP */
@media screen and (min-width: 1025px) {
  :root {
    --column-width-10: calc(10 * var(--grid-column-width) + (9 * var(--gutter-internal)));
    --column-width-11: calc(11 * var(--grid-column-width) + (10 * var(--gutter-internal)));
    --column-width-12: calc(100vw - (2 * var(var(--gutter-external))));
  }

  .no-margin-left\@desktop {
    margin-left: 0;
  }

  .margin-left-gutter\@desktop {
    margin-left: var(--gutter-internal);
  }

  .flex\@desktop {
    display: flex;
  }

  .flex--row\@desktop {
    flex-direction: row;
  }
  .flex--column\@desktop {
    flex-direction: column;
  }

  .order-1\@desktop {
    order: 1;
  }

  .order-2\@desktop {
    order: 2;
  }

  .order-3\@desktop {
    order: 3;
  }

  .column-10 {
    width: var(--column-width-10);
  }

  .column-11 {
    width: var(--column-width-11);
  }

  .column-12 {
    width: var(--column-width-12);
  }

  .column-1\@desktop {
    width: var(--column-width-1);
  }

  .column-2\@desktop {
    width: var(--column-width-2);
  }

  .column-3\@desktop {
    width: var(--column-width-3);
  }

  .column-4\@desktop {
    width: var(--column-width-4);
  }

  .column-5\@desktop {
    width: var(--column-width-5);
  }

  .column-6\@desktop {
    width: var(--column-width-6);
  }

  .column-7\@desktop {
    width: var(--column-width-7);
  }

  .column-8\@desktop {
    width: var(--column-width-8);
  }

  .column-9\@desktop {
    width: var(--column-width-9);
  }

  .column-10\@desktop {
    width: var(--column-width-10);
  }

  .column-11\@desktop {
    width: var(--column-width-11);
  }

  .column-12\@desktop {
    width: var(--column-width-12);
  }
}