/* Row */
.my-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

/* Column base */
.my-col {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    flex: 1 0 0%;
}

/* Breakpoints */
@media (min-width: 0px) {
    .my-col-1  { flex: 0 0 8.333%;  max-width: 8.333%;  }
    .my-col-2  { flex: 0 0 16.667%; max-width: 16.667%; }
    .my-col-3  { flex: 0 0 25%;     max-width: 25%;     }
    .my-col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .my-col-5  { flex: 0 0 41.667%; max-width: 41.667%; }
    .my-col-6  { flex: 0 0 50%;     max-width: 50%;     }
    .my-col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .my-col-8  { flex: 0 0 66.667%; max-width: 66.667%; }
    .my-col-9  { flex: 0 0 75%;     max-width: 75%;     }
    .my-col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
    .my-col-11 { flex: 0 0 91.667%; max-width: 91.667%; }
    .my-col-12 { flex: 0 0 100%;    max-width: 100%;    }
}

@media (min-width: 768px) {
    .my-col-md-1  { flex: 0 0 8.333%;  max-width: 8.333%;  }
    .my-col-md-2  { flex: 0 0 16.667%; max-width: 16.667%; }
    .my-col-md-3  { flex: 0 0 25%;     max-width: 25%;     }
    .my-col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .my-col-md-5  { flex: 0 0 41.667%; max-width: 41.667%; }
    .my-col-md-6  { flex: 0 0 50%;     max-width: 50%;     }
    .my-col-md-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .my-col-md-8  { flex: 0 0 66.667%; max-width: 66.667%; }
    .my-col-md-9  { flex: 0 0 75%;     max-width: 75%;     }
    .my-col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; }
    .my-col-md-11 { flex: 0 0 91.667%; max-width: 91.667%; }
    .my-col-md-12 { flex: 0 0 100%;    max-width: 100%;    }
}

@media (min-width: 992px) {
    .my-col-lg-1  { flex: 0 0 8.333%;  max-width: 8.333%;  }
    .my-col-lg-2  { flex: 0 0 16.667%; max-width: 16.667%; }
    .my-col-lg-3  { flex: 0 0 25%;     max-width: 25%;     }
    .my-col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
    .my-col-lg-5  { flex: 0 0 41.667%; max-width: 41.667%; }
    .my-col-lg-6  { flex: 0 0 50%;     max-width: 50%;     }
    .my-col-lg-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .my-col-lg-8  { flex: 0 0 66.667%; max-width: 66.667%; }
    .my-col-lg-9  { flex: 0 0 75%;     max-width: 75%;     }
    .my-col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
    .my-col-lg-11 { flex: 0 0 91.667%; max-width: 91.667%; }
    .my-col-lg-12 { flex: 0 0 100%;    max-width: 100%;    }
}

.my-p1 {
    padding: 0 5px;
}