.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}

/* Mobile-first container that expands on larger screens */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 0 10px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

/* Mobile-optimized column layout */
[class*="col-"] {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* Hide certain elements on mobile */
.hide-mobile {
    display: none;
}

/* Stackable columns for better mobile experience */
.stack-mobile {
    display: block;
}

/* Medium screens and up */
@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }

    .stack-mobile {
        display: flex;
    }

    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}