/* ==========================================================================
   Layout - Grid, Container, Flex Utilities
   Monotics WordPress Theme
   ========================================================================== */

/* --- Container --- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 60px;
  width: 100%;
}

/* --- Grid Utilities --- */
.grid {
  display: grid;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* --- Gap Utilities --- */
.gap-sm {
  gap: 16px;
}

.gap-md {
  gap: 28px;
}

.gap-lg {
  gap: 40px;
}

.gap-xl {
  gap: 60px;
}

.gap-2xl {
  gap: 80px;
}

/* --- Flex Utilities --- */
.flex {
  display: flex;
}

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

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

.flex-wrap {
  flex-wrap: wrap;
}

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

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

/* --- Width Utilities --- */
.w-full {
  width: 100%;
}

.max-w-container {
  max-width: var(--container-max);
}

/* --- Text Alignment --- */
.text-center {
  text-align: center;
}

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

/* --- Spacing Utilities --- */
.mt-60 {
  margin-top: 60px;
}

.mb-48 {
  margin-bottom: 48px;
}

/* --- Sticky --- */
.sticky {
  position: sticky;
  top: 100px;
}

/* --- Relative Positioning --- */
.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}