/*div {
    border-style: solid;
    border-color: deepskyblue;
    display: flex;
}

p {
    background-color: aqua;
    width: 20px;
    height: 20px;
    padding: 10px;
    margin: 5px;
}*/
.row, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    margin-right: 0px;
    margin-left: 0px;
    padding: auto;
} 

.row img, .col-1 img, .col-2 img, .col-3 img, .col-4 img, .col-5 img, .col-6 img, .col-7 img, .col-8 img, .col-9 img, .col-10 img, .col-11 img, .col-12 img {
    width: 100%;
    height: auto;
}

.row {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    
}

.col {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-1 {
    width: 8.333%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-2 {
    width: 16.666%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-3 {
    width: 25%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-4 {
    width: 33.333%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-5 {
    width: 41.666%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-6 {
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-7 {
    width: 58.333%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-8 {
    width: 66.666%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-9 {
    width: 75%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-10 {
    width: 83.333%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-11 {
    width: 91.666%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}

.col-12 {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-wrap: wrap;
}