.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 6px;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 48%;
  max-width: 48%;
  margin: 0 1%;
}

.column img {
  margin-top: 12px;
  vertical-align: middle;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.column figcaption {
	padding: 3px;
	height: 75px;
	vertical-align: middle;
	font-size: 1.5em;
}

.column a {
	text-decoration: none;
	color: inherit;
}

.column a:hover {
	color: #5350b5;
}

.filmGrid {
	display: block;
	width: 96%;
	margin: auto;
}

.container {
	position: relative;
}
.overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 97.8%;
	width: 100%;
	overflow: hidden;
	opacity: 0;
	transition: .5s ease;
	background-color: #9c99ff;
	margin-top: 12px;
	border-radius: 6px;
}

.container:hover .overlay {
  opacity: 0.5;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}