/* Basics */
*{
  padding: 0;
  margin: 0;
  text-align: center;
  /* box-sizing: border-box;
  border: 1px solid red; */
}

.flex{
  display: flex;
  flex-flow: row wrap;
}

.column{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.box{
  width: 100%;
  margin: 0;
  min-height: 150px;
}

.example {
  padding: 20px;
  color: white;
}

/* 
 ██████╗ ██████╗ ██╗     ██╗   ██╗███╗   ███╗███╗   ██╗███████╗
██╔════╝██╔═══██╗██║     ██║   ██║████╗ ████║████╗  ██║██╔════╝
██║     ██║   ██║██║     ██║   ██║██╔████╔██║██╔██╗ ██║███████╗
██║     ██║   ██║██║     ██║   ██║██║╚██╔╝██║██║╚██╗██║╚════██║
╚██████╗╚██████╔╝███████╗╚██████╔╝██║ ╚═╝ ██║██║ ╚████║███████║
 ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝  ╚═══╝╚══════╝
                                                                
 */

.col-1{width: 8.33%;}

.col-2{width: 16.66%;}

.col-3{width: 25%;}

.col-4{width: 33.33%;}

.col-5{width: 41.66%;}

.col-6{width: 50%;}

.col-7{width: 58.33%;}

.col-8{width: 66.66%;}

.col-9{width: 75%;}

.col-10{width: 83.33%;}

.col-11{width: 91.66%;}

.col-12{width: 100%;}

/* 
██████╗  ██████╗ ██╗  ██╗███████╗███████╗
██╔══██╗██╔═══██╗╚██╗██╔╝██╔════╝██╔════╝
██████╔╝██║   ██║ ╚███╔╝ █████╗  ███████╗
██╔══██╗██║   ██║ ██╔██╗ ██╔══╝  ╚════██║
██████╔╝╚██████╔╝██╔╝ ██╗███████╗███████║
╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚══════╝╚══════╝
                                      
*/

.purple {background-color: purple;}

.blue {background-color: blue;}

.corn {background-color: cornflowerblue;}

.green {background-color: green;}

.greenyellow {background-color: greenyellow;}

.olive {background-color:olive;}

.yellow {background-color: yellow;}

.orange {background-color: orange;}

.red {background-color: red;}

.magenta {background-color: magenta;}

/* Grid areas labels */
.purple {grid-area: 1;}
.blue {grid-area: 2;}
.corn {grid-area: 3;}
.green {grid-area: 4;}
.greenyellow {grid-area: 5;}
.olive {grid-area: 6;}
.yellow {grid-area: 7;}
.orange {grid-area: 8;}
.red {grid-area: 9;}
.magenta {grid-area: 10;}

/* 
██╗  ██╗███████╗███╗   ███╗ █████╗ ██╗     ██╗     
╚██╗██╔╝██╔════╝████╗ ████║██╔══██╗██║     ██║     
 ╚███╔╝ ███████╗██╔████╔██║███████║██║     ██║     
 ██╔██╗ ╚════██║██║╚██╔╝██║██╔══██║██║     ██║     
██╔╝ ██╗███████║██║ ╚═╝ ██║██║  ██║███████╗███████╗
╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝╚══════╝
                                                    
*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}

.box{
  height: auto;
}

.flexmobile{
  display: flex;
}

.clearmobile{
  clear: both;
}

.col-xs-1{width: 8.33%;}

.col-xs-2{width: 16.66%;}

.col-xs-3{width: 25%;}

.col-xs-4{width: 33.33%;}

.col-xs-5{width: 41.66%;}

.col-xs-6{width: 50%;}

.col-xs-7{width: 58.33%;}

.col-xs-8{width: 66.66%;}

.col-xs-9{width: 75%;}

.col-xs-10{width: 83.33%;}

.col-xs-11{width: 91.66%;}

.col-xs-12{width: 100%;}

}

/* 
███████╗███╗   ███╗ █████╗ ██╗     ██╗     
██╔════╝████╗ ████║██╔══██╗██║     ██║     
███████╗██╔████╔██║███████║██║     ██║     
╚════██║██║╚██╔╝██║██╔══██║██║     ██║     
███████║██║ ╚═╝ ██║██║  ██║███████╗███████╗
╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝╚══════╝
                                           
*/
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}

.box{
  height: auto;
}

.flexmobile{
  display: flex;
}

.clearmobile{
  clear: both;
}

.col-s-1{width: 8.33%;}

.col-s-2{width: 16.66%;}

.col-s-3{width: 25%;}

.col-s-4{width: 33.33%;}

.col-s-5{width: 41.66%;}

.col-s-6{width: 50%;}

.col-s-7{width: 58.33%;}

.col-s-8{width: 66.66%;}

.col-s-9{width: 75%;}

.col-s-10{width: 83.33%;}

.col-s-11{width: 91.66%;}

.col-s-12{width: 100%;}

}

/* 
███╗   ███╗███████╗██████╗ ██╗██╗   ██╗███╗   ███╗
████╗ ████║██╔════╝██╔══██╗██║██║   ██║████╗ ████║
██╔████╔██║█████╗  ██║  ██║██║██║   ██║██╔████╔██║
██║╚██╔╝██║██╔══╝  ██║  ██║██║██║   ██║██║╚██╔╝██║
██║ ╚═╝ ██║███████╗██████╔╝██║╚██████╔╝██║ ╚═╝ ██║
╚═╝     ╚═╝╚══════╝╚═════╝ ╚═╝ ╚═════╝ ╚═╝     ╚═╝
                                                  
 */
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}

.box {
  height: auto;
}

.purple{
  height: 100px;
}

.gridtab01, .gridtab02{
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 10px;
}

.gridtab01 .purple {
  grid-column: col-start / span 12;
  grid-row: 1 / 2;
}

.gridtab02 .purple {
  grid-column: col-start / span 12;
  grid-row: 1 / 1;
}

.gridtab01 .blue {
  grid-column: col-start / span 4;
  grid-row: 3 / 3;
}

.gridtab02 .blue {
  grid-column: col-start / span 6;
  grid-row: 2 / 2;
}

.gridtab01 .corn {
  grid-column: col-start 5 / span 4;
  grid-row: 3 / 3;
}

.gridtab02 .corn {
  grid-column: col-start 7 / span 6;
  grid-row: 2 / 2;
}


.gridtab01 .green {
  grid-column: col-start 9 / span 4;
  grid-row: 3 / 3;
}

.gridtab02 .green {
  grid-column: col-start / span 6;
  grid-row: 3 / 3;
}

.gridtab01 .greenyellow {
  grid-column: col-start / span 8;
  grid-row: 4 / 6;
}

.gridtab02 .greenyellow {
  grid-column: col-start 7 / span 6;
  grid-row: 3 / 3;
}

.gridtab01 .olive {
  grid-column: col-start 9 / span 4;
  grid-row: 4 / 4;
}

.gridtab02 .olive {
  grid-column: col-start / span 12;
  grid-row: 4 / 4;
}

.gridtab01 .yellow {
  grid-column: col-start 9 / span 4;
  grid-row: 5 / 5;
}

.gridtab02 .yellow {
  grid-column: col-start / span 4;
  grid-row: 5 / 5;
}

.gridtab01 .orange {
  grid-column: col-start / span 6;
  grid-row: 6 / 6;
}

.gridtab02 .orange {
  grid-column: col-start 5 / span 4;
  grid-row: 5 / 5;
}

.gridtab01 .red {
  grid-column: col-start 7 / span 6;
  grid-row: 6 / 6;
}

.gridtab02 .red {
  grid-column: col-start 9 / span 4;
  grid-row: 5 / 5;
}

.gridtab01 .magenta {
  grid-column: col-start / span 12;
  grid-row: 7 / 8;
}

.gridtab02 .magenta {
  grid-column: col-start / span 12;
  grid-row: 6 / 6;
}

.col-m-1{width: 8.33%;}

.col-m-2{width: 16.66%;}

.col-m-3{width: 25%;}

.col-m-4{width: 33.33%;}

.col-m-5{width: 41.66%;}

.col-m-6{width: 50%;}

.col-m-7{width: 58.33%;}

.col-m-8{width: 66.66%;}

.col-m-9{width: 75%;}

.col-m-10{width: 83.33%;}

.col-m-11{width: 91.66%;}

.col-m-12{width: 100%;}

}

/* 
██╗      █████╗ ██████╗  ██████╗ ███████╗
██║     ██╔══██╗██╔══██╗██╔════╝ ██╔════╝
██║     ███████║██████╔╝██║  ███╗█████╗  
██║     ██╔══██║██╔══██╗██║   ██║██╔══╝  
███████╗██║  ██║██║  ██║╚██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
                                         
 */
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}

.purple{
  height: 100px;
}

.gridpc01, .gridpc02{
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 10px;
}

.gridpc01 .purple {
  grid-column: col-start / span 8;
  grid-row: 1 / 1;
}

.gridpc02 .purple {
  grid-column: col-start / span 4;
  grid-row: 1 / 2;
}

.gridpc01 .blue {
  grid-column: col-start / span 4;
  grid-row: 2 / 2;
}

.gridpc02 .blue {
  grid-column: col-start / span 4;
  grid-row: 3 / 4;
}

.gridpc01 .corn {
  grid-column: col-start 5 / span 4;
  grid-row: 2 / 2;
}

.gridpc02 .corn {
  grid-column: col-start / span 4;
  grid-row: 5 / 6;
}

.gridpc01 .green {
  grid-column: col-start / span 8;
  grid-row: 3 / 4;
}

.gridpc02 .green {
  grid-column: col-start / span 4;
  grid-row: 7 / 8;
}

.gridpc01 .greenyellow {
  grid-column: col-start / span 3;
  grid-row: 5 / 5;
}

.gridpc02 .greenyellow {
  grid-column: col-start 5 / span 4;
  grid-row: 1 / 3;
}

.gridpc01 .olive {
  grid-column: col-start 4 / span 2;
  grid-row: 5 / 5;
}

.gridpc02 .olive {
  grid-column: col-start 5 / span 4;
  grid-row: 3 / 6;
}

.gridpc01 .yellow {
  grid-column: col-start 6 / span 3;
  grid-row: 5 / 5;
}

.gridpc02 .yellow {
  grid-column: col-start 5 / span 4;
  grid-row: 7 / 8;
}

.gridpc01 .orange {
  grid-column: col-start 9 / span 4;
  grid-row: 1 / 1;
}

.gridpc02 .orange {
  grid-column: col-start 9 / span 4;
  grid-row: 1 / 2;
}

.gridpc01 .red {
  grid-column: col-start 9 / span 4;
  grid-row: 2 / 4;
}

.gridpc02 .red {
  grid-column: col-start 9 / span 4;
  grid-row: 2 / 6;
}

.gridpc01 .magenta {
  grid-column: col-start 9 / span 4;
  grid-row: 5 / 5;
}

.gridpc02 .magenta {
  grid-column: col-start 9 / span 4;
  grid-row: 6 / 8;
}


.col-l-1{width: 8.33%;}

.col-l-2{width: 16.66%;}

.col-l-3{width: 25%;}

.col-l-4{width: 33.33%;}

.col-l-5{width: 41.66%;}

.col-l-6{width: 50%;}

.col-l-7{width: 58.33%;}

.col-l-8{width: 66.66%;}

.col-l-9{width: 75%;}

.col-l-10{width: 83.33%;}

.col-l-11{width: 91.66%;}

.col-l-12{width: 100%;}

} 

/* 
██╗  ██╗██╗      █████╗ ██████╗  ██████╗ ███████╗
╚██╗██╔╝██║     ██╔══██╗██╔══██╗██╔════╝ ██╔════╝
 ╚███╔╝ ██║     ███████║██████╔╝██║  ███╗█████╗  
 ██╔██╗ ██║     ██╔══██║██╔══██╗██║   ██║██╔══╝  
██╔╝ ██╗███████╗██║  ██║██║  ██║╚██████╔╝███████╗
╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
                                                  
*/
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}

.purple{
  height: 100px;
}

.gridpc01, .gridpc02{
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 10px;
}

.gridpc01 .purple {
  grid-column: col-start / span 8;
  grid-row: 1 / 1;
}

.gridpc02 .purple {
  grid-column: col-start / span 4;
  grid-row: 1 / 2;
}

.gridpc01 .blue {
  grid-column: col-start / span 4;
  grid-row: 2 / 2;
}

.gridpc02 .blue {
  grid-column: col-start / span 4;
  grid-row: 3 / 4;
}

.gridpc01 .corn {
  grid-column: col-start 5 / span 4;
  grid-row: 2 / 2;
}

.gridpc02 .corn {
  grid-column: col-start / span 4;
  grid-row: 5 / 6;
}

.gridpc01 .green {
  grid-column: col-start / span 8;
  grid-row: 3 / 4;
}

.gridpc02 .green {
  grid-column: col-start / span 4;
  grid-row: 7 / 8;
}

.gridpc01 .greenyellow {
  grid-column: col-start / span 3;
  grid-row: 5 / 5;
}

.gridpc02 .greenyellow {
  grid-column: col-start 5 / span 4;
  grid-row: 1 / 3;
}

.gridpc01 .olive {
  grid-column: col-start 4 / span 2;
  grid-row: 5 / 5;
}

.gridpc02 .olive {
  grid-column: col-start 5 / span 4;
  grid-row: 3 / 6;
}

.gridpc01 .yellow {
  grid-column: col-start 6 / span 3;
  grid-row: 5 / 5;
}

.gridpc02 .yellow {
  grid-column: col-start 5 / span 4;
  grid-row: 6 / 8;
}

.gridpc01 .orange {
  grid-column: col-start 9 / span 4;
  grid-row: 1 / 1;
}

.gridpc02 .orange {
  grid-column: col-start 9 / span 4;
  grid-row: 1 / 2;
}

.gridpc01 .red {
  grid-column: col-start 9 / span 4;
  grid-row: 2 / 4;
}

.gridpc02 .red {
  grid-column: col-start 9 / span 4;
  grid-row: 2 / 6;
}

.gridpc01 .magenta {
  grid-column: col-start 9 / span 4;
  grid-row: 5 / 5;
}

.gridpc02 .magenta {
  grid-column: col-start 9 / span 4;
  grid-row: 6 / 8;
}


.col-xl-1{width: 8.33%;}

.col-xl-2{width: 16.66%;}

.col-xl-3{width: 25%;}

.col-xl-4{width: 33.33%;}

.col-xl-5{width: 41.66%;}

.col-xl-6{width: 50%;}

.col-xl-7{width: 58.33%;}

.col-xl-8{width: 66.66%;}

.col-xl-9{width: 75%;}

.col-xl-10{width: 83.33%;}

.col-xl-11{width: 91.66%;}

.col-xl-12{width: 100%;}

}