/* utilities styles */

/* Typography */

.fs-small {
  font-size: var(--fs-small);
}

.fs-normal {
  font-size: var(--fs-normal);
}

.fs-large {
  font-size: var(--fs-large);
}

.fs-xlarge {
  font-size: var(--fs-xlarge);
}

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

.ff-head {
  font-family: var(--ff-heading);
}

.ff-para {
  font-family: var(--ff-paragraph);
}

/* Color */
.text-white {
  color: var(--color-white);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-dark {
  color: var(--color-dark);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-dark {
  background-color: var(--color-dark);
}

.bg-darken {
  background-color: var(--color-darken);
}

.text-primary {
  color: var(--color-primary);
}

.bg-primary {
  background-color: var(--color-primary);
}

/* Shadow */
.shadow {
  box-shadow: var(--shadows);
}

/* Fontings */

.display-font {
  font-family: var(--ff-heading);
  font-size: var(--fs-display);
  line-height: var(--lh-100);
}

.heading-01 {
  font-family: var(--ff-heading);
  font-size: var(--fs-xlarge);
  line-height: var(--lh-100);
}

.heading-02 {
  font-family: var(--ff-heading);
  font-size: var(--fs-large);
  line-height: var(--lh-200);
}

.heading-03 {
  font-family: var(--ff-heading);
  font-size: var(--fs-medium);
  line-height: var(--lh-100);
}

.paragraph-01 {
  font-size: var(--fs-medium);
  line-height: var(--lh-600);
}

.paragraph-02 {
  font-size: var(--fs-normal);
  line-height: var(--lh-400);
}

.paragraph-03 {
  font-size: var(--fs-small);
  line-height: var(--lh-400);
}

/* Layout */

.container {
  /* 1140px */
  max-width: 120rem;
  padding: 0 var(--spacing-600);
  margin: 0 auto;
}

.flow > * + * {
  margin-top: var(--spacing, var(--spacing-400));
}

/* Flex and Grid */

.flex {
  display: flex;
  gap: var(--spacing-flex, var(--spacing-400));
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-flex, var(--spacing-400));
}

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

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

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

.grid-5-auto {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-grid, var(--spacing-500));
}

.grid-4-auto {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-grid, var(--spacing-500));
}

.grid-3-auto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-grid, var(--spacing-500));
}

.grid-2-auto {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-grid, var(--spacing-500));
}

.grid-1-auto {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-grid, var(--spacing-500));
}

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

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

.grid-align-bottom {
  margin-top: auto;
}

/* Spacing (Margin and Padding */
.mt-2 {
  margin-top: var(--spacing-200);
}

.mb-2 {
  margin-bottom: var(--spacing-200);
}

.mb-4 {
  margin-bottom: var(--spacing-400);
}

.mt-4 {
  margin-top: var(--spacing-400);
}

/* Padding */
.pt-2 {
  padding: var(--spacing-200);
}

.pb-2 {
  padding-bottom: var(--spacing-200);
}

.pb-4 {
  padding-bottom: var(--spacing-400);
}

.pt-4 {
  padding-top: var(--spacing-400);
}

.pb-6 {
  padding-bottom: var(--spacing-600);
}

.pt-6 {
  padding-top: var(--spacing-600);
}

/* Centeting and Siding */

.center-div-item-verti {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.center-div-item-hori {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.mar-auto-left {
  margin-left: auto;
}

.mar-auto-center {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Text formatting */

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

/* Display */

.block {
  display: block !important;
}