/* ==========================
   FLEX UTILITIES
   ========================== */

/* Flex container */
.flex {
  display: flex;
}

/* Direction */
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}

/* Wrap */
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}

/* 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;
}
.items-stretch {
  align-items: stretch;
}

/* Align self */
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}
.self-stretch {
  align-self: stretch;
}

/* Gap */
.gap-1 {
  gap: 0.25rem; /* 4px */
}
.gap-2 {
  gap: 0.5rem; /* 8px */
}
.gap-4 {
  gap: 1rem; /* 16px */
}
.gap-8 {
  gap: 2rem; /* 32px */
}

/* ==========================
   MEDIA QUERIES (RESPONSIVE)
   ========================== */

/* Small devices (phones) */
@media (max-width: 640px) {
  .sm-flex-col {
    flex-direction: column;
  }
  .sm-justify-center {
    justify-content: center;
  }
  .sm-items-center {
    align-items: center;
  }
}

/* Medium devices (tablets) */
@media (min-width: 641px) and (max-width: 1024px) {
  .md-flex-row {
    flex-direction: row;
  }
  .md-justify-between {
    justify-content: space-between;
  }
  .md-items-center {
    align-items: center;
  }
}

/* Large devices (desktops) */
@media (min-width: 1025px) {
  .lg-flex-row {
    flex-direction: row;
  }
  .lg-justify-around {
    justify-content: space-around;
  }
  .lg-items-start {
    align-items: flex-start;
  }
}

.item{
    color: #fff;
    font-size: 1.6rem;
}