/* =====================
   Breakpoints System
===================== */

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

@media (min-width: 1280px) {
  .container { max-width: 1200px; }
}

@media (min-width: 1536px) {
  .container { max-width: 1320px; }
}

/* Grid */
.grid {
  display: grid;
  gap: 24px;
}

.grid-2, .grid-3, .grid-4 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Section */
.section {
  padding: 40px 0;
}

@media (min-width: 768px) {
  .section { padding: 60px 0; }
}

@media (min-width: 1280px) {
  .section { padding: 80px 0; }
}