div.callout div.grid {margin-top: -5px;}
article h2 {font-size: 2em; text-align: left;}
article h3 {font-size: 1.8em; text-transform: none; }
div.panel {margin-bottom: 0;}
div.panel img {
  max-width: 70%;
  height: auto;
}
.news_banner {position: relative;}
.news_banner img {width: 100%;}
.news_banner h1 {font-size: 9vw;}
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
blockquote span {
font-size: 3em; color: orange; display: inline;
}
div.news_index a {border-bottom: #CA4E14;
    border-width: 0 0 1px 0;
    border-style: none none dotted none;
}
article.news_article {width: 70%; text-align: left; padding: 5% 2% 2% 5%; float: left;}
div.news_index {width: 25%; float: right; padding: 5% 2% 2% 0; text-align: left;}

article {display: block;}
.cards_container {
  padding: 5%;
  display: flex;
  justify-content: space-evenly;
  gap: 3rem;
  flex-wrap: wrap;
}
.card {
  background-color: white;
  color: #005395;;
  max-height: 380px;
  max-width: 380px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
  border-radius: 7px;
}
.card:hover {
  transform: translate(0, -5px);
  transition: 0.1s;
  transition-timing-function: ease-in-out;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.card > a p {padding: 20px; font-size: 1.5em; text-align: left; text-transform: none; font-weight: 300;}
.card > a img {
object-fit: cover;
width: 380px;
height: 250px;
}
.hidden {width: 380px; visibility: hidden;}
@media only screen and (max-width: 50em) {
article.card img {margin: 0 0 0 0;}
}
@media (min-width: 600px) {
  .cards_container { grid-template-columns: repeat(2, 1fr); }
  .card {margin-right: initial; margin-left: initial;}
}
@media (min-width: 900px) {
  .cards_container { grid-template-columns: repeat(3, 1fr); }
}