/* 1. Global Reset for this container */
.layout-container,
.layout-container *,
.layout-container *:before,
.layout-container *:after {
    box-sizing: border-box;
}

.layout-container {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 2. The Flex Wrapper */
.layout-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
}

/* 3. The Responsive Column */
.layout-col {
    flex: 1 0 0%;     /* Grows to fill space equally */
    padding: 1rem 0;    /* The "Gutter" */
    width: 100%;      /* Forces stack on mobile */
    min-width: 100%;
}

/* 4. Desktop Transition */
@media (min-width: 768px) {
    .layout-col {
        min-width: 0;   /* Allows them to sit side-by-side */
    }

    /* Optional: Specific Widths */
    .layout-col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .layout-col-6 { flex: 0 0 50%; max-width: 50%; }
    .layout-col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}