.project {
    border-radius: 5%;
    border-color: greenyellow;
    border-style: solid;
    border-width: 5px;
  }
  .project img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    width: 150px;
  }
  .-division {
    min-height: 2rem;
    display: inline-flex; 
    flex-direction: row;
    padding: 20px 0;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 20px; 
}
.-box {
    min-height: 2rem;
    max-width: min(100%, 50rem);
    align-self: stretch; 
    padding: 15px 5px;
    overflow: auto;
    font-size: 1rem;
}
      /* rem based */
      @media (min-width: 50rem) {
        .-thin2, .-thin3, .-thin4 { 
            width: 45%;
        }        
    }
    @media (min-width: 75rem) {
        .-thin3 { 
            width: 30%;
        }        
    }
    @media (min-width: 100rem) {
        .-division {
            padding-top: 30px;
            padding-bottom: 30px;
            row-gap: 30px;
        }
        .-thin4 { 
            width: 22.5%;
        }        
    } 

        /* px based */
        /* @media (min-width: 360px) {
            .-box { 
                padding-left: 10px; 
                padding-right: 10px; 
            }        
        }
        @media (min-width: 412px) {
            .-box { 
                font-size: 1.0625rem;
            }            
        }
        @media (min-width: 480px) {
            .-box { 
                font-size: 1.125rem;
            }        
        }
        @media (min-width: 560px) {
            .-box { 
                font-size: 1.1875rem;
            }        
        }
        @media (min-width: 640px) {
            .-box { 
                padding: 20px 3%;
            }        
        }
        @media (min-width: 640px) {
            .-box { 
                font-size: 1.25rem;
            }        
        } */