/* Folha de estilo apenas da página inicial (Portal para as páginas de cada exposiçao */

:root {
	--bg-color: #4f2626;

	--width-mobile: 320px;
	--width-tablet: 800px;

	--margin: 16px;
}

* { margin: 0; }

body { background-color: var(--bg-color); }

h3, h4 { font-family: arial; }

/* MAIN CONTAINER */

.mobile main,
.tablet main {
	display: flex;
	flex-direction: column;
}

#imgTitle { margin: var(--margin) auto; }

.mobile #imgTitle { width: var(--width-mobile); height: calc(var(--width-mobile) * .44); }
.tablet #imgTitle { width: 320px;               height: calc(320px * .44); }

.btn-each-exposition {
	margin: 0 auto;
	border-radius: 4px;

	background-size: contain;

	text-align: center;
	display: flex;
	flex-direction: column;

	cursor: pointer;
}

a {
	text-decoration: none;
	display: block;
}


.title-on-button,
.date-information {
	color: #fff;

	text-shadow: 0px 4px 10px #000;
}

.title-on-button {
	margin-top: auto;
	margin-bottom: var(--margin);
}

.date-information {
	margin-bottom: var(--margin);
}

.btn-each-exposition { margin-bottom: var(--margin); }

.btn-each-exposition:hover { filter: brightness(1.1)}

.mobile .btn-each-exposition { width: 320px; height: 200px; }

.tablet .btn-each-exposition { width: 800px; height: 500px; }