/* ======================
   FLEX UTILITY CLASSES
====================== */

/* Flex Container */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}

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

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

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

/* Align Content */
.content-start { align-content: flex-start; }
.content-center { align-content: center; }
.content-end { align-content: flex-end; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }

/* Gap Utilities */
.gap-25 { gap: 0.25rem; }
.gap-50 { gap: 0.5rem; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }
.gap-4 { gap: 4rem; }
.gap-5 { gap: 5rem; }
.gap-6 { gap: 6rem; }
.gap-7 { gap: 7rem; }
.gap-8 { gap: 8rem; }

.row-gap-25 { row-gap: 0.25rem; }
.row-gap-50 { row-gap: 0.5rem; }
.row-gap-1 { row-gap: 1rem; }
.row-gap-2 { row-gap: 2rem; }
.row-gap-3 { row-gap: 3rem; }
.row-gap-4 { row-gap: 4rem; }
.row-gap-5 { row-gap: 5rem; }

.column-gap-25 { column-gap: 0.25rem; }
.column-gap-50 { column-gap: 0.5rem; }
.column-gap-1 { column-gap: 1rem; }
.column-gap-2 { column-gap: 2rem; }
.column-gap-3 { column-gap: 3rem; }
.column-gap-4 { column-gap: 4rem; }
.column-gap-5 { column-gap: 5rem; }
.column-gap-6 { column-gap: 6rem; }

/* ==========================
   RESPONSIVE FLEX CLASSES
========================== */

/* Small Screens (≥640px) */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:flex-wrap { flex-wrap: wrap; }

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


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

  .sm\:row-gap-1 { row-gap: 1rem; }
  .sm\:row-gap-2 { row-gap: 2rem; }
  

  .sm\:column-gap-1 { column-gap: 1rem; }
  .sm\:column-gap-2 { column-gap: 2rem; }
}

/* Medium Screens (≥768px) */
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:flex-wrap { flex-wrap: wrap; }

  .md\:justify-center { justify-content: center; }
  .md\:justify-between { justify-content: space-between; }

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

  .md\:row-gap-1 { row-gap: 1rem; }
  .md\:row-gap-2 { row-gap: 2rem; }
  .md\:column-gap-1 { column-gap: 1rem; }
  .md\:column-gap-2 { column-gap: 2rem; }
}

/* Large Screens (≥1024px) */
@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:flex-wrap { flex-wrap: wrap; }

  .lg\:justify-around { justify-content: space-around; }
  .lg\:justify-center { justify-content: center; }

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

  .lg\:row-gap-2 { row-gap: 2rem; }
  .lg\:column-gap-2 { column-gap: 2rem; }
}