/* Base container - mobile first */
.my_ctnr {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.my_row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/* Base column styles - mobile first (100% width) */
.my_col_sm_12, .my_col_sm_11, .my_col_sm_10, .my_col_sm_9, .my_col_sm_8, .my_col_sm_7, .my_col_sm_6, 
.my_col_sm_5, .my_col_sm_4, .my_col_sm_3, .my_col_sm_2, .my_col_sm_1,
.my_col_md_12, .my_col_md_11, .my_col_md_10, .my_col_md_9, .my_col_md_8, .my_col_md_7, .my_col_md_6, 
.my_col_md_5, .my_col_md_4, .my_col_md_3, .my_col_md_2, .my_col_md_1,
.my_col_lg_12, .my_col_lg_11, .my_col_lg_10, .my_col_lg_9, .my_col_lg_8, .my_col_lg_7, .my_col_lg_6, 
.my_col_lg_5, .my_col_lg_4, .my_col_lg_3, .my_col_lg_2, .my_col_lg_1 {
    position: relative;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Tablet: 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {

    .my_row {
        flex-direction: row;
    }
    
    .my_col_md_12 { 
        flex: 0 0 100%;
        max-width: 100%;
    }

    .my_col_md_11 { 
        flex: 0 0 91.666%;
        max-width: 91.666%; 
    }
    .my_col_md_10 { 
        flex: 0 0 83.333%; 
        max-width: 83.333%; 
    }
    .my_col_md_9 { 
        flex: 0 0 75%; 
        max-width: 75%; 
    }
    .my_col_md_8 { 
        flex: 0 0 66.666%;
        max-width: 66.666%; 
    }
    .my_col_md_7 { 
        flex: 0 0 58.333%; 
        max-width: 58.333%; 
    }
    .my_col_md_6 { 
        flex: 0 0 50%; 
        max-width: 50%; 
    }
    .my_col_md_5 { 
        flex: 0 0 41.666%; 
        max-width: 41.666%; 
    }
    .my_col_md_4 { 
        flex: 0 0 33.33%;
        max-width: 33.33%; 
    }
    .my_col_md_3 { 
        flex: 0 0 25%; 
        max-width: 25%; 
    }
    .my_col_md_2 { 
        flex: 0 0 16.666%; 
        max-width: 16.666%; 
    }
    .my_col_md_1 { 
        flex: 0 0 8.333%; 
        max-width: 8.333%; 
    }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
    .my_ctnr { 
        max-width: 1200px; 
    }
    .my_row { 
        flex-direction: row; 
    }
    
    .my_col_lg_12 {
        flex: 0 0 100%; 
        max-width: 100%; 
    }
    .my_col_lg_11 { 
        flex: 0 0 91.666%; 
        max-width: 91.666%; 
    }
    .my_col_lg_10 { 
        flex: 0 0 83.333%; 
        max-width: 83.333%; 
    }
    .my_col_lg_9 { 
        flex: 0 0 75%; 
        max-width: 75%; 
    }
    .my_col_lg_8 { 
        flex: 0 0 66.666%; 
        max-width: 66.666%; 
    }
    .my_col_lg_7 { 
        flex: 0 0 58.333%; 
        max-width: 58.333%; 
    }
    .my_col_lg_6 { 
        flex: 0 0 50%; 
        max-width: 50%; 
    }
    .my_col_lg_5 { 
        flex: 0 0 41.666%; 
        max-width: 41.666%; 
    }
    .my_col_lg_4 { 
        flex: 0 0 33.33%; 
        max-width: 33.33%; 
    }
    .my_col_lg_3 { 
        flex: 0 0 25%; 
        max-width: 25%; 
    }
    .my_col_lg_2 { 
        flex: 0 0 16.666%; 
        max-width: 16.666%; 
    }
    .my_col_lg_1 { 
        flex: 0 0 8.333%;
        max-width: 8.333%; 
    }
}

/* Small mobile optimization */
@media (max-width: 480px) {
    .my_ctnr {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .my_col_sm_12, .my_col_md_12, .my_col_lg_12,
    .my_col_sm_11, .my_col_md_11, .my_col_lg_11,
    .my_col_sm_10, .my_col_md_10, .my_col_lg_10,
    .my_col_sm_9, .my_col_md_9, .my_col_lg_9,
    .my_col_sm_8, .my_col_md_8, .my_col_lg_8,
    .my_col_sm_7, .my_col_md_7, .my_col_lg_7,
    .my_col_sm_6, .my_col_md_6, .my_col_lg_6,
    .my_col_sm_5, .my_col_md_5, .my_col_lg_5,
    .my_col_sm_4, .my_col_md_4, .my_col_lg_4,
    .my_col_sm_3, .my_col_md_3, .my_col_lg_3,
    .my_col_sm_2, .my_col_md_2, .my_col_lg_2,
    .my_col_sm_1, .my_col_md_1, .my_col_lg_1 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}