/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  /* Base: 10px = 1rem */

  --space-1: 0.1rem;
  --space-2: 0.2rem;
  --space-3: 0.3rem;
  --space-4: 0.4rem;
  --space-5: 0.5rem;

  --space-10: 1rem;
  --space-15: 1.5rem;
  --space-20: 2rem;

  --container: 120rem; /* 1200px */
}

/* ==========================================================================
   Breakpoints

   Mobile First

   md 768px
   lg 1024px
   xl 1200px
   ========================================================================== */

/* ==========================================================================
   Container
   ========================================================================== */

.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--space-20);
}

/* ==========================================================================
   Display
   ========================================================================== */

.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}

/* ==========================================================================
   Flex Direction
   ========================================================================== */

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

/* ==========================================================================
   Justify Content
   ========================================================================== */

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

/* ==========================================================================
   Align Items
   ========================================================================== */

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

/* ==========================================================================
   Row Gap
   ========================================================================== */

.row-gap-1 {
  row-gap: var(--space-1);
}
.row-gap-2 {
  row-gap: var(--space-2);
}
.row-gap-3 {
  row-gap: var(--space-3);
}
.row-gap-4 {
  row-gap: var(--space-4);
}

/* ==========================================================================
   Column Gap
   ========================================================================== */

.col-gap-1 {
  column-gap: var(--space-1);
}
.col-gap-2 {
  column-gap: var(--space-2);
}
.col-gap-3 {
  column-gap: var(--space-3);
}
.col-gap-4 {
  column-gap: var(--space-4);
}

/* ==========================================================================
   Position
   ========================================================================== */

.static {
  position: static;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}

/* ==========================================================================
   Text Alignment
   ========================================================================== */

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

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */

@media (min-width: 768px) {
  /* Display */

  .md-block {
    display: block;
  }
  .md-inline-block {
    display: inline-block;
  }
  .md-flex {
    display: flex;
  }

  /* Flex Direction */

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

  /* Justify */

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

  /* Align */

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

  /* Row Gap */

  .md-row-gap-1 {
    row-gap: var(--space-1);
  }
  .md-row-gap-2 {
    row-gap: var(--space-2);
  }
  .md-row-gap-3 {
    row-gap: var(--space-3);
  }
  .md-row-gap-4 {
    row-gap: var(--space-4);
  }

  /* Column Gap */

  .md-col-gap-1 {
    column-gap: var(--space-1);
  }
  .md-col-gap-2 {
    column-gap: var(--space-2);
  }
  .md-col-gap-3 {
    column-gap: var(--space-3);
  }
  .md-col-gap-4 {
    column-gap: var(--space-4);
  }

  /* Text */

  .md-text-left {
    text-align: left;
  }
  .md-text-center {
    text-align: center;
  }
  .md-text-right {
    text-align: right;
  }
}

@media (min-width: 1024px) {
  /* Display */

  .lg-block {
    display: block;
  }
  .lg-inline-block {
    display: inline-block;
  }
  .lg-flex {
    display: flex;
  }

  /* Flex Direction */

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

  /* Justify */

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

  /* Align */

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

  /* Row Gap */

  .lg-row-gap-1 {
    row-gap: var(--space-1);
  }
  .lg-row-gap-2 {
    row-gap: var(--space-2);
  }
  .lg-row-gap-3 {
    row-gap: var(--space-3);
  }
  .lg-row-gap-4 {
    row-gap: var(--space-4);
  }

  /* Column Gap */

  .lg-col-gap-1 {
    column-gap: var(--space-1);
  }
  .lg-col-gap-2 {
    column-gap: var(--space-2);
  }
  .lg-col-gap-3 {
    column-gap: var(--space-3);
  }
  .lg-col-gap-4 {
    column-gap: var(--space-4);
  }

  /* Text */

  .lg-text-left {
    text-align: left;
  }
  .lg-text-center {
    text-align: center;
  }
  .lg-text-right {
    text-align: right;
  }
}

@media (min-width: 1200px) {
  /* Display */

  .xl-block {
    display: block;
  }
  .xl-inline-block {
    display: inline-block;
  }
  .xl-flex {
    display: flex;
  }

  /* Flex Direction */

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

  /* Justify */

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

  /* Align */

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

  /* Row Gap */

  .xl-row-gap-1 {
    row-gap: var(--space-1);
  }
  .xl-row-gap-2 {
    row-gap: var(--space-2);
  }
  .xl-row-gap-3 {
    row-gap: var(--space-3);
  }
  .xl-row-gap-4 {
    row-gap: var(--space-4);
  }

  /* Column Gap */

  .xl-col-gap-1 {
    column-gap: var(--space-1);
  }
  .xl-col-gap-2 {
    column-gap: var(--space-2);
  }
  .xl-col-gap-3 {
    column-gap: var(--space-3);
  }
  .xl-col-gap-4 {
    column-gap: var(--space-4);
  }

  /* Text */

  .xl-text-left {
    text-align: left;
  }
  .xl-text-center {
    text-align: center;
  }
  .xl-text-right {
    text-align: right;
  }
}