* {
        box-sizing: border-box;
      }
      
      .base {
        display: flex;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 4%;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        margin-top: 0;
        margin-left: 0;
        z-index: 5;
        padding: 1%;
      }
      
      .base2 {
        display: flex;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 4%;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        margin-top: 0;
        margin-left: 0;
        z-index: 5;
      }
      
      header {
        width: 100%;
        min-height: 20vh;
        max-height: 20vh;
        padding: 2%;
      }
      
      .xxscolumn {
        flex: 10%;
        max-width: 10%;
        padding: 2%;
      }
      
      .xscolumn {
        flex: 16%;
        max-width: 16%;
        padding: 2%;
      }
      
      .smcolumn {
        flex: 25%;
        max-width: 25%;
        padding: 2%;
      }
      
      .mcolumn {
        flex: 40%;
        max-width: 40%;
        padding: 2%;
      }
      
      .xmcolumn {
        flex: 50%;
        max-width: 50%;
        padding: 2%;
      }
      
      .lgcolumn {
        flex: 60%;
        max-width:60%;
        padding: 2%;
      }
      
      .xlcolumn {
        flex: 75%;
        max-width: 75%;
        padding: 2%;
      }
      
      .xxlcolumn {
        flex: 80%;
        max-width: 80%;
        padding: 2%;
      }





.grid {
        display: grid;
        grid-template-areas: "topL top topR" "midL mid midR" "bttmL bttm bttmR";
        min-height: 100%;
        max-height: 100%;
        width: 100%;
        z-index: 0;
}

#holder {
        width: 30%;
        max-width: 32vw;
}