body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--color-bg);
  color: var(--color-text);
}

.container {
  width: min(1280px, 100% - 2rem);
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: var(--space-6);
}

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

.flex {
  display: flex;
}

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

.justify-between {
  justify-content: space-between;
}

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

@media (max-width: 767px) {
  .container {
    width: min(1280px, 100% - 1.25rem);
  }
}