@charset "UTF-8";
/* CSS Document */

html {
	padding: 0px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

body {
	margin: 0px;
}

a {
	color: white;
}
.head {
	height: 75px;
	background-color: darkgray;
	padding: 10px;
	text-align: center;
}

.logo {
	height: 100%;
}

.title {
	background-color: rgba(66,66,66,1.00);
	text-align: center;
	text-transform: uppercase;
	color: white;
	padding: 10px;
}

.image-container {
  	display: grid;
  	gap: 1rem;
	grid-template-columns: repeat(auto-fit, 300px);
  	grid-auto-rows: 450px;
	padding: 10px;
	align-self: center;
}

.card {
	position: relative;
  	display: flex;
  	flex-direction: column;
  	justify-content:center;
 	align-items:center;
 	background: #353535;
	font-size: 14px;
 	color: #fff;
 	box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  	height: 100%;
  	width: 100%;
  	border-radius: 4px;
  	transition: all 500ms;
  	overflow: hidden;
  	background-size:contain;
  	background-position: center;
  	background-repeat: no-repeat;
  	padding: 0;
	margin: 0;
}

.label {
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	padding: 5px 0;
	width: 100%;
	position: absolute;
	bottom: 0;
}

.yearbook {
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}