/* grid.css */
.container {
  width: 100%;
  max-width: 1200px;
  min-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

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

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

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

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

/* Grid dengan Rasio Khusus */

.grid-70-30 {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: var(--spacing, 0); /* default 0 kalau gak di-set */
}
/* Grid 30-70 */
.grid-30-70 {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: var(--spacing, 0);
}

/* Grid 60-40 */
.grid-60-40 {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--spacing, 0);
}

/* Grid 40-60 */
.grid-40-60 {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: var(--spacing, 0);
}

/* Grid 50-50 */
.grid-50-50 {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: var(--spacing, 0);
}

/* Grid 80-20 */
.grid-80-20 {
  display: grid;
  grid-template-columns: 80% 20%;
  gap: var(--spacing, 0);
}

/* Grid 20-80 */
.grid-20-80 {
  display: grid;
  grid-template-columns: 20% 80%;
  gap: var(--spacing, 0);
}


/* Alignment dan Distribusi */
.grid-center {
  justify-items: center;
  align-items: center;
}

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

.grid-end {
  justify-items: end;
  align-items: end;
}

.grid-stretch {
  justify-items: stretch;
  align-items: stretch;
}

/* Grid untuk Layout Konten */
.grid-header {
  grid-template-columns: 1fr 2fr 1fr; /* Header dengan tiga kolom */
}

.grid-sidebar-main {
  grid-template-columns: 1fr 3fr; /* Sidebar dan Konten Utama */
}

.grid-main-sidebar {
  grid-template-columns: 3fr 1fr; /* Konten Utama dan Sidebar */
}

/* Nested Grid */
.grid-nested > .grid {
  display: grid;
  gap: var(--spacing);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Auto Fit dan Auto Fill */
.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Kolom Span */
.col-span-1 {
  grid-column: span 1;
}

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

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

.col-span-4 {
  grid-column: span 4;
}

.col-span-full {
  grid-column: 1 / -1;
}

/* Row Span */
.row-span-1 {
  grid-row: span 1;
}

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

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

.row-span-4 {
  grid-row: span 4;
}

.row-span-full {
  grid-row: 1 / -1;
}