/* Layout */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 640px) { .container { max-width: var(--container-sm); padding-left: var(--spacing-6); padding-right: var(--spacing-6); } }
@media (min-width: 768px) { .container { max-width: var(--container-md); padding-left: var(--spacing-8); padding-right: var(--spacing-8); } }
@media (min-width: 1024px) { .container { max-width: var(--container-lg); } }
@media (min-width: 1280px) { .container { max-width: var(--container-xl); } }
@media (min-width: 1536px) { .container { max-width: var(--container-2xl); } }

.container--sm { max-width: var(--container-sm); margin-left: auto; margin-right: auto; }
.container--md { max-width: var(--container-md); margin-left: auto; margin-right: auto; }
.container--lg { max-width: var(--container-lg); margin-left: auto; margin-right: auto; }
.container--full { max-width: 100%; }

/* Sections */
.section { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
.section--sm { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.section--lg { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); }

/* Grid */
.grid {
    display: grid;
    gap: var(--spacing-6);
}

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

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

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

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }

/* Gap */
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* Margins & Padding */
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

@media (min-width: 768px) {
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}