/* Imports */
@import '../_variables.css';


/* Styles */
main {
	display: flex;
	overflow: auto;
	resize: none;
	height: 100vh;
	margin: auto;
	padding: 0 18%;
	justify-content: center;
	align-items: center;
	background: var(--background-color);
}

main div.column {
	float: left;
	width: 33.3%;
}

main div.column section {
	margin: 56px 32px;
	padding: 4px;
	background-color: #FFFFFF;
	box-shadow: 0 0 16px #565656;
	border-radius: 16px;
	text-align: center;
}

main div.column section a {
	text-decoration: none;
	color: #000000;
}

main div.column section div.image {
	width: 100%;
	border-radius: 16px;
	background-color: #000000;
}


main div.column section div.image img {
	width: 100%;
	border-radius: 16px;
	margin-bottom: -4px;
	opacity: 0.3;
}

main div.column section div.image img:hover {
	transition: 0.88s;
	opacity: 1;
}

main div.column section h1 {
	padding: 16px;
	font-size: 1.1vw;
}

@media (max-width: 1512px) {
	main div.column section h1 {
		font-size: 1.1vw;
	}
}

@media (max-width: 960px) {
	main {
		display: block;
		height: 100%;
		padding: 0;
		padding-top: 42px;
	}
	
	main div.column {
		width: 100%;
	}
	
	
	main div.column section {
		margin: 0 32px 42px 32px;
	}

	main div.column section div.image {
		opacity: 1;
	}

	main div.column section h1 {
		font-size: 4.2vw;
	}
}