@import "header.css";

@import url("https://fonts.googleapis.com/css?family=Lora:wght@600&display=swap");
.ir-arriba {
	display: none;
	padding: 20px;
	background: #0b2f3a;
	font-size: 20px;
	color: #ff8000;
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1;
}

body {
	background: #eaeff2;
}

main {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr 2fr;
	grid-template-rows: auto;
}

#banner {
	grid-column: 2/4;
}

.contenido > h1 {
	font-size: 2em;
	font-family: "Lora", serif;
}

.contenido {
	font-size: 1.5em;
	color: #67595e;
	grid-column: 2/4;
	font-family: "Roboto", sans-serif;
}

#banner > img {
	height: auto;
	width: 100%;
}

@media screen and (max-width: 800px) {
	main {
		grid-template-columns: 1fr 4fr 1fr;
		grid-template-rows: auto;
	}
	#banner {
		grid-column: 2/3;
	}
	.contenido {
		grid-column: 2/3;
	}
}

@media screen and (max-width: 1200px) {
	main {
		grid-template-columns: 1fr 4fr 1fr;
		grid-template-rows: auto;
	}
	#banner {
		grid-column: 2/3;
	}
	.contenido {
		grid-column: 2/3;
	}
}