/* media queries */
	@media (orientation: portrait) {
		@media screen and (max-width: 500px) { /* Para celulares pequeños  */
			:root {
				--main-title-display: block;
				--header-height: 5em;
				--br: 0em; /* Border radius basic unit */
				--display-info-section: flex;
				--info-section-img-width: 100vw;
			}
		}
		@media screen and (min-width: 501px) { /* Celulares y tablets */
			:root {
				--main-title-display: block;
				--header-height: 5em;
				--br: 1em; /* Border radius basic unit */
				--display-info-section: grid;
				--info-section-img-width: 100%;
			}
		}
	}
	@media (orientation: landscape) {
		@media screen and (max-height: 400px) { /* Para celulares en vertical */
			:root {
				--main-title-display: block;
				--header-height: 5em;
				--br: 0em; /* Border radius basic unit */
				--display-info-section: flex;
				--info-section-img-width: 100vw;
			}
		}
		@media screen and (min-height: 401px) { /* Para pantallas grandes */
			:root {
				--main-title-display: block;
				--header-height: 5em;
				--br: 1em; /* Border radius basic unit */
				--display-info-section: grid;
				--info-section-img-width: 100%;
			}
		}
	}

header {
	display: flex;
	align-items: center;
	height: var(--header-height);
}

#main-title {
	display: var(--main-title-display);
	font-weight: 100;
	letter-spacing: 0.1em;
	padding: 1em;
}

main {
	margin-block: 1em;
	display: flex;
	width: 100%;
	min-height: fit-content;
	flex-direction: column;
	gap: 1em;
}

.video-section {
	align-self: center;
	& iframe {
		width: var(--info-section-img-width);
		aspect-ratio: 2/1;
		border-radius: var(--br);
	}
}

.description-article {
	display: flex;
	flex-direction: column;
	text-align: center;
	font-weight: bold;
	width: 50%;
	gap: 1em;
	margin-inline: auto;
	padding: 1em;
	background-color: var(--main-bg);
	color: var(--main-txt);
	border-radius: var(--br);
}

.info-section {
	position: relative;
	display: var(--display-info-section);
	background: transparent !important;
	margin-block: 1em;
	grid-template-columns: 1fr 1fr;
	flex-direction: column;
	opacity: 0;
	transition: opacity 500ms;
	overflow: hidden;

	& article {
		position: relative;
		display: flex;
		flex-direction: column;
		font-weight: bold;
		text-align: center;
		justify-content: center;
		gap: 1em;
		margin-inline: 1em;
		padding: 1em;
		background-color: var(--main-bg);
		color: var(--main-txt);
		border-radius: var(--br);
		height: 100%;
		transform: translate(-45%, 0%);
		transition: transform 500ms;
	}
	& img {
		width: var(--info-section-img-width);
		transform: translate(45%, 0%);
		transition: transform 500ms;
	}
	& section {
		width: var(--info-section-img-width);
		transform: translate(45%, 0%);
		transition: transform 500ms;
	}
}

.image-description {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1em;
	position: absolute;
	left: 0;
	top: 0;
	background-color: var(--second-bg-t);
	color: var(--main-txt);
	width: 100%;
	aspect-ratio: 797/597;
	opacity: 0;
	transition: opacity 500ms;
}
.image-description:hover {
	opacity: 1;
}

.show-info-section {
	opacity: 1;

	& article {
		transform: translate(0%, 0%);
	}
	& img {
		transform: translate(0%, 0%);
	}
	& section {
		transform: translate(0%, 0%);
	}
}

.img-left {
	& img {
		border-radius: 0em var(--br) var(--br) 0em;
	}
	& div {
		border-radius: 0em var(--br) var(--br) 0em;
	}
}

.img-right {
	& img {
		border-radius: var(--br) 0em 0em var(--br);
	}
	& div {
		border-radius: var(--br) 0em 0em var(--br);
	}
}

strong {
	font-weight: bolder;
	color: var(--main-txt);
}

em {
	font-weight: bold;
	color: var(--main-txt);
}

footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: var(--header-height);
	border-radius: var(--br) var(--br) 0em 0em;
	& h5 {
		font-weight: bolder;
	}
	& a {
		color: var(--second-color);
		cursor: pointer;
	}
	& * {
		margin-inline: auto;
	}
}