body,h1,h2,h3,h4,h5,h6 {font-family: 'Open Sans', sans-serif;}
.w3-bar-block .w3-bar-item {padding:20px}

.help {cursor: help;}

blockquote::first-letter {
  font-size: 150%;
}

p {
    font-size: 14pt;
}
li {
    font-size: 14pt;
}

.card {
  background-color: offwhite;
  padding: 1rem;
  height: 640px;
  width: 430px;
  text-align: center;
}

#cards {
  max-width: 3500px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}


/*this really needs to be specified to card only instead of all images
temporary fix

cannot figure out how to use collection.js to set class or height*/
img {
  width: 400px;
  height: 560px;
}

@media (min-width: 777px) {
#cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1400px) {
#cards { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1880px) {
#cards { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 2300px) {
#cards { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 2750px) {
#cards { grid-template-columns: repeat(6, 1fr); }
}

label {
        display: inline-block;
/*        width: 150px; */
        text-align: right;
      }