/* Container Layouts */

/* Base Container Styles */
.container {
    width: 100%;
    padding-top: var(--spacing-5);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    margin-left: auto;
    margin-right: auto;
}

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

/* Container Responsive Sizes */
@media (min-width: 576px) {
    .container {
        max-width: var(--container-sm);
    }
}

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

@media (min-width: 992px) {
    .container {
        max-width: var(--container-lg);
    }
}

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

@media (min-width: 1400px) {
    .container {
        max-width: var(--container-2xl);
    }
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
    }
}