/* General styling */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* Container to center the grid */
.container {
    max-width: 960px;
    margin: 20px auto;
    padding: 0 5px;
}

/* Row styling for modern browsers (Flexbox) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 10px -5px;
}

/* Row styling for IE11 (using float fallback) */
.row::after {
    content: "";
    display: table;
    clear: both;
}

/* Common column styling */
.row > div {
    background-color: #d1d1d1;
    border: 1px solid #c0c0c0;
    padding: 15px;
    margin: 5px;
    text-align: center;
    color: #555;
    box-sizing: border-box;
    min-height: 50px;
    font-size: 1rem;
    /* This float rule is for IE11 fallback */
    float: left;
}

/* Section heading styling */
.section-title {
    font-weight: bold;
    text-align: left;
    margin-bottom: 5px;
    font-size: 1.2rem;
    color: #333;
}

/* Horizontal rule for visual separation */
.separator {
    border: none;
    border-top: 1px solid #ccc;
    margin: 20px 0;
}

/* Grid system for desktop (based on 12 columns) */
.col-1 { width: calc(8.333% - 10px); }
.col-2 { width: calc(16.666% - 10px); }
.col-3 { width: calc(25% - 10px); }
.col-4 { width: calc(33.333% - 10px); }
.col-5 { width: calc(41.666% - 10px); }
.col-6 { width: calc(50% - 10px); }
.col-7 { width: calc(58.333% - 10px); }
.col-8 { width: calc(66.666% - 10px); }
.col-9 { width: calc(75% - 10px); }
.col-10 { width: calc(83.333% - 10px); }
.col-11 { width: calc(91.666% - 10px); }
.col-12 { width: calc(100% - 10px); }

/* Custom classes for non-standard splits */
.col-1-2 { width: calc(50% - 10px); }
.col-1-7 { width: calc(14.2857% - 10px); }
.col-1-8 { width: calc(12.5% - 10px); }
.col-1-9 { width: calc(11.1111% - 10px); }
.col-1-10 { width: calc(10% - 10px); }
.col-1-11 { width: calc(9.0909% - 10px); }

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
    .row > div {
        font-size: 0.7rem;
    }
    .row {
        margin: 10px -5px;
        flex-wrap: wrap;
    }

    /* Applied the "Golden Rule": The widths are now based on flexible calculations
       to allow for a more intelligent layout on mobile, preventing stacking
       on top of each other while also avoiding horizontal scrolling. */
    .col-1 { width: calc(100% / 12 - 10px); }
    .col-2 { width: calc(100% * 2 / 12 - 10px); }
    .col-3 { width: calc(100% * 3 / 12 - 10px); }
    .col-4 { width: calc(100% * 4 / 12 - 10px); }
    .col-5 { width: calc(100% * 5 / 12 - 10px); }
    .col-6 { width: calc(100% * 6 / 12 - 10px); }
    .col-7 { width: calc(100% * 7 / 12 - 10px); }
    .col-8 { width: calc(100% * 8 / 12 - 10px); }
    .col-9 { width: calc(100% * 9 / 12 - 10px); }
    .col-10 { width: calc(100% * 10 / 12 - 10px); }
    .col-11 { width: calc(100% * 11 / 12 - 10px); }
    .col-12 { width: calc(100% - 10px); }

    /* Custom classes also follow the Golden Rule, maintaining their proportions. */
    .col-1-2 { width: calc(100% / 2 - 10px); }
    .col-1-7 { width: calc(100% / 7 - 10px); }
    .col-1-8 { width: calc(100% / 8 - 10px); }
    .col-1-9 { width: calc(100% / 9 - 10px); }
    .col-1-10 { width: calc(100% / 10 - 10px); }
    .col-1-11 { width: calc(100% / 11 - 10px); }
}