<-- !h3 { 
    background-color: green;
    color: violet;
   } -->


dl.grid, dl.grid dd, dl.grid dt {
  border: thin solid var(--navColor);
  box-shadow: inset rgb(255 254 255 /0.6) 0 0.3em .3em, 
              inset rgb(0 0 0 /0.15) 0 -0.1em .3em, 
              hsl(0 0% 60%) 0 .1em 3px, 
              hsl(0 0% 45%) 0 .3em 1px, 
              rgb(0 0 0 /0.2) 0 .5em 5px;
}

.joodb table th, .joodb .header { 
   color: #C8CCCE; background: #E26B0A;
    }



dl.grid {
	display: grid; background: inherit;
        grid-template-columns: 1fr 1fr; 
}

dd {
	margin: 0;
        background: yellow;
	padding-left: 1em;
}

dt {
	margin: 0;
        background: red;
	padding-left: 1em;
}

dl.grid dd {
	margin: 1em;	
        padding: 1em;
        text-align: right;
}

dl.grid dt {
	margin-bottom: 1em;
        margin-left: 1em;
        margin-top: 1em;
        margin-right: 1em;
        padding: 1em;
}



@media {
  .joodb dt, .joodb dd {
	display: grid; color: brown;
        text-align: left;
        grid-template-columns: repeat(auto-fill, minmax(90%, 1fr));
  }
}