.cards {
    max-width: 1200px;
    margin: 20px auto;
    display: grid;
    grid-gap: 1rem;
}

.card {
    height: 100%;
}

.card .card-link {
    width: 100%;
    height: 100%;
	display: block;
	margin: 0 auto;
    padding: 1.25rem;
    color: white;
    text-align: center;
    font-weight: 700;
}

.card .card-link:hover, .card .card-link:focus {
    background-color: rgba(0,0,0,0.7);
    color: white;
}

.red {background-color: #A52822;}
.orange {background-color: #D24027;}
.gold {background-color: #A56828;}
.blue {background-color: #2F3090;}
.light-blue {background-color: #336498;}
.green {background-color: #187D3E;}
.pennlight-blue {background-color: #01256e;}
    
.show-text-on-hover {
    visibility: hidden;
    display: block;
    font-size: .875rem;
    font-weight: 300;
    font-style: italic;
    margin-top: 5px;
}

.modal-tagline {
    font-size: .875rem;
    font-weight: 300;
    font-style: italic;
    margin-top: 10px;
    display: block;
}

.card-link:hover .show-text-on-hover, .card-link:focus .show-text-on-hover {
    visibility: visible;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card-span {grid-column: span 2;}
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card-span {grid-column: span 3;}
}

/*modal*/
/* .page-block to blur and darken 
 * the background when the modal is open 
 */
.page-block {
    display: none;
    background: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(5px);  
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
}
    
.page-block--show {
    display: block;
}

.card .modal-dialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.card .modal-dialog:target {
	opacity: 1;
	pointer-events: auto;
}

.card .modal-dialog__inner {
	width: 75%;
	max-width: 800px;
	max-height: calc(100vh - 150px);
	position: relative;
	margin: 75px auto;
	padding: 35px;
	background: white;
}

.card .modal-dialog__close {
	font-size: 24px;
	position: absolute;
	right: -24px;
	text-align: center;
	top: -10px;
}

.card .modal-dialog__content {
	max-height: calc(100vh - 250px);
       padding: 10px;
	overflow: auto;
}