.rows {
  justify-content:center; 
  flex-wrap: wrap; 
  align-content: flex-start; 
  display:flex; 
  flex-direction:row;
}

.rowitem {
  text-align: center; 
  width: 100px;
  height: 90px;
  
  margin: 2px; 
  padding: 5px; 
  border-radius: 5px; 
  border: solid 2px var(--mid); 
  background-color: var(--dark);
} 

.rowitem div{
  padding: 3px;
  width: 94px;
  height: 84px;  
  
  border-radius: 5px;
  background-color: var(--mid);
  color: var(--dark);
  
  font-size: 0.85rem;
}

.rowitem:hover{
  border-color: var(--light);
}

.rowitem div:hover{
  color: var(--light);
}

.rowitem a:hover{
  text-decoration: none;
}

.rowbtn {
  text-align: center; 
  margin: 2px; 
  padding: 5px; 
  border-radius: 5px; 
  border: solid 1px var(--mid); 
  background-color: var(--dark);
} 

.rowbtn:hover{
  border-color: var(--light);
}

.sortcheck{
  text-align: center; 
  margin: 2px; 
  padding: 2px 5px 5px 5px; 
  border-radius: 5px; 
  
  border: solid 1px var(--mid); 
  background-color: var(--dark);
}

.sortcheck:hover{  
  border: solid 1px var(--light); 
  background-color: var(--mid);
  color: var(--dark);
  
  text-decoration: none;
  cursor: pointer;
}

.selected{
  border: solid 1px var(--light); 
  background-color: var(--mid);
  color: var(--dark);
  
  text-decoration: none;
}


.rowbtn {
    position: relative;
    border: none;
}
.rowbtn img {
    width: 150px;
}

.bigbtn img {
  width: 100%;
}

.bigbtn p {
  font-size: small;  
}

.rowbtn:hover > img {
    opacity: 30%;
}

.imgdesc {
    box-sizing: border-box;
    position: absolute;

    border-radius: 3px;

    margin: 3px;
    top: 0;
    left: 0;
    
    
    width: 100%;
    max-height: 143px;
    overflow-y: auto;

    visibility: hidden;
}

.bigbtn .imgdesc {
  height: 100%;
  text-decoration: none;
  max-height: initial;
}

.rowbtn:hover > .imgdesc {
    visibility: visible;
}

/*https://codepen.io/ramenhog/pen/dvZVda*/
.masonry {
  column-count: 1;
  column-gap: 0;
  counter-reset: item-counter;

  @media screen and (min-width: 400px) {
    column-count: 2;
  }

  @media screen and (min-width: 600px) {
    column-count: 3;
  }

  @media screen and (min-width: 800px) {
    column-count: 4;
  }

  @media screen and (min-width: 1100px) {
    column-count: 5;
  }
}