/* Common column styles */
.my-col {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0 15px;  /* Add gutter space between columns */
}

/* Custom Column Classes for lg (large screens) */
@media (min-width: 1200px) {
    .my-col-lg-2-1 { flex: 0 0 17.5%; max-width: 17.5%; }
    .my-col-lg-2-2 { flex: 0 0 18.3333%; max-width: 18.3333%; }
    .my-col-lg-2-3 { flex: 0 0 19.1667%; max-width: 19.1667%; }
    .my-col-lg-2-4 { flex: 0 0 20%; max-width: 20%; }
    .my-col-lg-2-5 { flex: 0 0 20.8333%; max-width: 20.8333%; }

    .my-col-lg-3-1 { flex: 0 0 25.8333%; max-width: 25.8333%; }
    .my-col-lg-3-2 { flex: 0 0 26.6667%; max-width: 26.6667%; }
    .my-col-lg-3-3 { flex: 0 0 27.5%; max-width: 27.5%; }
    .my-col-lg-3-4 { flex: 0 0 28.3333%; max-width: 28.3333%; }
    .my-col-lg-3-5 { flex: 0 0 29.1667%; max-width: 29.1667%; }

    .my-col-lg-4-1 { flex: 0 0 34.1667%; max-width: 34.1667%; }
    .my-col-lg-4-2 { flex: 0 0 35%; max-width: 35%; }
    .my-col-lg-4-3 { flex: 0 0 35.8333%; max-width: 35.8333%; }
    .my-col-lg-4-4 { flex: 0 0 36.6667%; max-width: 36.6667%; }
    .my-col-lg-4-5 { flex: 0 0 37.5%; max-width: 37.5%; }

    .my-col-lg-5-1 { flex: 0 0 42.5%; max-width: 42.5%; }
    .my-col-lg-5-2 { flex: 0 0 43.3333%; max-width: 43.3333%; }
    .my-col-lg-5-3 { flex: 0 0 44.1667%; max-width: 44.1667%; }
    .my-col-lg-5-4 { flex: 0 0 45%; max-width: 45%; }
    .my-col-lg-5-5 { flex: 0 0 45.8333%; max-width: 45.8333%; }
}

/* Custom Column Classes for md (medium screens) */
@media (min-width: 992px) and (max-width: 1199px) {
    .my-col-md-2-1 { flex: 0 0 17.5%; max-width: 17.5%; }
    .my-col-md-2-2 { flex: 0 0 18.3333%; max-width: 18.3333%; }
    .my-col-md-2-3 { flex: 0 0 19.1667%; max-width: 19.1667%; }
    .my-col-md-2-4 { flex: 0 0 20%; max-width: 20%; }
    .my-col-md-2-5 { flex: 0 0 20.8333%; max-width: 20.8333%; }

    .my-col-md-3-1 { flex: 0 0 25.8333%; max-width: 25.8333%; }
    .my-col-md-3-2 { flex: 0 0 26.6667%; max-width: 26.6667%; }
    .my-col-md-3-3 { flex: 0 0 27.5%; max-width: 27.5%; }
    .my-col-md-3-4 { flex: 0 0 28.3333%; max-width: 28.3333%; }
    .my-col-md-3-5 { flex: 0 0 29.1667%; max-width: 29.1667%; }

    .my-col-md-4-1 { flex: 0 0 34.1667%; max-width: 34.1667%; }
    .my-col-md-4-2 { flex: 0 0 35%; max-width: 35%; }
    .my-col-md-4-3 { flex: 0 0 35.8333%; max-width: 35.8333%; }
    .my-col-md-4-4 { flex: 0 0 36.6667%; max-width: 36.6667%; }
    .my-col-md-4-5 { flex: 0 0 37.5%; max-width: 37.5%; }

    .my-col-md-5-1 { flex: 0 0 42.5%; max-width: 42.5%; }
    .my-col-md-5-2 { flex: 0 0 43.3333%; max-width: 43.3333%; }
    .my-col-md-5-3 { flex: 0 0 44.1667%; max-width: 44.1667%; }
    .my-col-md-5-4 { flex: 0 0 45%; max-width: 45%; }
    .my-col-md-5-5 { flex: 0 0 45.8333%; max-width: 45.8333%; }
}

/* Custom Column Classes for sm (small screens) */
@media (min-width: 768px) and (max-width: 991px) {
    .my-col-sm-2-1 { flex: 0 0 17.5%; max-width: 17.5%; }
    .my-col-sm-2-2 { flex: 0 0 18.3333%; max-width: 18.3333%; }
    .my-col-sm-2-3 { flex: 0 0 19.1667%; max-width: 19.1667%; }
    .my-col-sm-2-4 { flex: 0 0 20%; max-width: 20%; }
    .my-col-sm-2-5 { flex: 0 0 20.8333%; max-width: 20.8333%; }

    .my-col-sm-3-1 { flex: 0 0 25.8333%; max-width: 25.8333%; }
    .my-col-sm-3-2 { flex: 0 0 26.6667%; max-width: 26.6667%; }
    .my-col-sm-3-3 { flex: 0 0 27.5%; max-width: 27.5%; }
    .my-col-sm-3-4 { flex: 0 0 28.3333%; max-width: 28.3333%; }
    .my-col-sm-3-5 { flex: 0 0 29.1667%; max-width: 29.1667%; }

    .my-col-sm-4-1 { flex: 0 0 34.1667%; max-width: 34.1667%; }
    .my-col-sm-4-2 { flex: 0 0 35%; max-width: 35%; }
    .my-col-sm-4-3 { flex: 0 0 35.8333%; max-width: 35.8333%; }
    .my-col-sm-4-4 { flex: 0 0 36.6667%; max-width: 36.6667%; }
    .my-col-sm-4-5 { flex: 0 0 37.5%; max-width: 37.5%; }

    .my-col-sm-5-1 { flex: 0 0 42.5%; max-width: 42.5%; }
    .my-col-sm-5-2 { flex: 0 0 43.3333%; max-width: 43.3333%; }
    .my-col-sm-5-3 { flex: 0 0 44.1667%; max-width: 44.1667%; }
    .my-col-sm-5-4 { flex: 0 0 45%; max-width: 45%; }
    .my-col-sm-5-5 { flex: 0 0 45.8333%; max-width: 45.8333%; }
}

/* Custom Column Classes for xs (extra small screens) */
@media (max-width: 767px) {
    .my-col-xs-2-1 { flex: 0 0 17.5%; max-width: 17.5%; }
    .my-col-xs-2-2 { flex: 0 0 18.3333%; max-width: 18.3333%; }
    .my-col-xs-2-3 { flex: 0 0 19.1667%; max-width: 19.1667%; }
    .my-col-xs-2-4 { flex: 0 0 20%; max-width: 20%; }
    .my-col-xs-2-5 { flex: 0 0 20.8333%; max-width: 20.8333%; }

    .my-col-xs-3-1 { flex: 0 0 25.8333%; max-width: 25.8333%; }
    .my-col-xs-3-2 { flex: 0 0 26.6667%; max-width: 26.6667%; }
    .my-col-xs-3-3 { flex: 0 0 27.5%; max-width: 27.5%; }
    .my-col-xs-3-4 { flex: 0 0 28.3333%; max-width: 28.3333%; }
    .my-col-xs-3-5 { flex: 0 0 29.1667%; max-width: 29.1667%; }

    .my-col-xs-4-1 { flex: 0 0 34.1667%; max-width: 34.1667%; }
    .my-col-xs-4-2 { flex: 0 0 35%; max-width: 35%; }
    .my-col-xs-4-3 { flex: 0 0 35.8333%; max-width: 35.8333%; }
    .my-col-xs-4-4 { flex: 0 0 36.6667%; max-width: 36.6667%; }
    .my-col-xs-4-5 { flex: 0 0 37.5%; max-width: 37.5%; }

    .my-col-xs-5-1 { flex: 0 0 42.5%; max-width: 42.5%; }
    .my-col-xs-5-2 { flex: 0 0 43.3333%; max-width: 43.3333%; }
    .my-col-xs-5-3 { flex: 0 0 44.1667%; max-width: 44.1667%; }
    .my-col-xs-5-4 { flex: 0 0 45%; max-width: 45%; }
    .my-col-xs-5-5 { flex: 0 0 45.8333%; max-width: 45.8333%; }
}