.pagelistingblock-cardgridwdate ul.list  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  min-height: 21.25rem;
  gap: 2rem 3rem;
  /*
   ** NOTE: this was grid-auto-rows: 1fr; on 5/12/2026 KP switched it to grid-auto-rows: auto
   ** This correct a problem with wide gapping on the last row of the Video page on OAI
  */
  grid-auto-rows: auto;
}
@media (max-width: 766px) {
  .pagelistingblock-cardgridwdate ul.list  {
   grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 506px) {
  .pagelistingblock-cardgridwdate ul.list  {
   grid-template-columns: 1fr;
  }
}
.pagelistingblock-cardgridwdate ul.list li  {
  display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
  justify-items: start;
  align-items: start;
  /*
   ** NOTE: this was gap: 0.01rem; on 5/12/2026 KP switched it to column-gap: 0.01rem; row-gap: 1rem;
   ** This goes with the correction above and addes a little more spacing between elements in the card
  */
  column-gap: .01rem;
  row-gap:1rem;
}
@media (max-width: 766px) {
  .pagelistingblock-cardgridwdate ul.list li  {
    grid-template-rows: auto;
    gap: 1rem;
  }
}

.pagelistingblock-cardgridwdate ul.list .list-item .summary {
  font-size: 1rem;
}
.pagelistingblock-cardgridwdate ul.list .list-item .summary p {
 font-size: 1rem;
}
.pagelistingblock-cardgridwdate ul.list .title h3  {
  margin-top:0;
  margin-bottom:0;
  font-size: 1.6rem;
  line-height: 1.9rem;
}
.pagelistingblock-cardgridwdate ul.list .title h3 a  {
  margin-top:0;
  margin-bottom:0;
  font-size: 1.6rem;
  line-height: 1.9rem;
}
.pagelistingblock-cardgridwdate ul.list .title .date {
    font-size: 1rem;
    font-family: sans-serif;
}

.pagelistingblock-cardgridwdate ul.list .image {
  min-height: 0;
  max-height: 225px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}
.pagelistingblock-cardgridwdate ul.list .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
} 


.pagelistingblock-cardlist ul.list  {
  display: block;
  padding-top: 0;
  max-width: 900px;
  margin: 0 auto;
}
.pagelistingblock-cardlist ul.list li  {  
  margin: 0 0 2rem 0;
  width: 100%;
}

.pagelistingblock-cardlist ul.list li > div  {  
  padding-top: .5rem;
  background-color: var(--lightest);
  margin: 0 0 3rem 0;
  padding: 30px;

  display: grid;
  grid-template-columns: 30% 68%;
  gap: 1rem 1.5rem;
  align-content: start;
  align-items: start;
}

.pagelistingblock-cardlist ul.list li div article h3.page-title,
.pagelistingblock-cardlist ul.list li div article h3.page-title a  {
  margin-top:0;
  line-height: 2.2rem;
  font-size: 2rem;
  font-weight: normal;
  text-decoration: none;
}
.pagelistingblock-cardlist ul.list li div article h3.page-title a:hover,
.pagelistingblock-cardlist ul.list li div article h3.page-title a:focus,
.pagelistingblock-cardlist ul.list li div article h3.page-title a:active  {
  text-decoration: underline;
  color: var(--accent2)
}
.pagelistingblock-cardlist ul.list li div article h3.page-title,
.pagelistingblock-cardlist ul.list li div article .date {
  margin-bottom: 1rem;
}