.background{
	width: 100%;
}

  	.background-image, 
  	.background-image-1, 
  	.background-image-2,
  	.background-image-3{
  		padding: 26rem 0; position: relative;
  		background-image: url('../images/carrousel-0.png');
  		background-size: 100% 100%;
  		background-color: var(--white); background-position: center;
  		background-repeat: no-repeat;
  	}.background-image-1{
  		background-image: url('../images/carrousel-2.png');
  	}.background-image-2{
  		background-image: url('../images/carrousel-1.png');
  	}.background-image-3{
  		background-image: url('../images/disco.png');
  	}

	.background-gradient{
		position: absolute;
		display: block;
		width: 100%;
		top: 0; left: 0;
		background-image: linear-gradient(
			to bottom,
			rgba(255,255,255,0) 50%,
			rgba(255,255,255,1) 99%
		);
		padding: 26rem 0;
	}

.cont-info{
	background-color: var(--white);
	overflow: hidden;
}

	.sub-cont-info{
		padding: 6rem 0;
	}

	[decoration]{
		line-height: 3rem;
		letter-spacing: 0.1rem;
		color: var(--gray);
	}

		.article-info{
			padding: 3rem;
		}.article-info > h3, .sub-info-title{
			font-size: 2.6rem;
			margin: 3rem 0;
			font-family: "IbmPlexMonoItalic";
		}.article-info > p{
			font-size: 1.6rem;
			text-align: justify;
			margin: 1rem 0;
		}

		.paqueteria{
			text-decoration: none;
			color: var(--brown-1);
			font-weight: bold;
			transition: 0.3s all ease;
		}.paqueteria:hover{
			text-decoration: none;
			color: var(--brown);
		}

		.cont-articles-info{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			padding: 3rem;
		}

			.sub-info, .sub-info-1{
				flex-basis: 50%;
			}.sub-info-1 > p{
				margin: 6rem 0;
			}.sub-info > ul{
				margin-left: 3rem;
			}.sub-info > ul > li{
				color: rgba(0, 0, 0, 0.6);
			}.sub-info-title{
				margin: 0;
				margin-bottom: 3rem;
			}

		.article-info-1{
			clear: both;
		}

		.article-info-1{
			padding: 1rem 3rem;
		}

.cont-questions{
	margin: 3rem 0;
}

	.question-title{
		width: 23%;
		margin: 0 auto;
		text-align: center;
		font-size: 3rem;
		color: var(--gray-1);
		padding-bottom: 2rem;
		border-bottom: 0.2rem solid var(--gray-1);
	}

.cont-cards{
	padding: 3rem 0;
	background-color: var(--gray-2);
	overflow: hidden;
	margin-bottom: 6rem;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-auto-columns: 1fr;
	grid-auto-rows: 1fr;

	grid-column-gap: 3rem;
}

	.sub-card{
		width: 100%;
		padding: 1rem;
	}

		.card{
			transition: 400ms all ease;
		}

			.card-header{
				position: relative;
				z-index: 3;
				overflow: hidden;
				padding: 2rem;
				text-align: left;
				background-color: var(--white);
				color: var(--brown-2);
				cursor: pointer;
				user-select: none;
				box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
				transition: 400ms all ease;
			}.card-header.color, .card-header:hover{
				background-color: var(--brown-2);
				color: var(--white);
			}

				.card-title{
					font-size: 2rem;
					font-weight: normal;
					font-family: "Arial";
					letter-spacing: 0.2rem;
				}.card-title::before{
					content: '';
					position: absolute;
					top: 2.6rem; right: 2rem;
					border-top: 1rem solid var(--brown-2);
					border-left: 1rem solid transparent;
					border-right: 1rem solid transparent;
					border-bottom: 1rem solid transparent;
				}.card-header.color > .card-title::before, 
				.card-header:hover > .card-title::before{
					border-top: 1rem solid var(--white);
				}

			.card-body{
				position: absolute;
				left: 0;
				display: block;
				width: 100%;
				visibility: hidden;
				opacity: 0;
				background-color: var(--white);
				padding: 3rem;
				box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);

				transition: 400ms all ease;
				transform: translateY(-13rem);
			}.card-body.visible{
				position: static;
				display: block;
				width: 100%;
				visibility: visible;
				transform: translateY(0);
				opacity: 1;
			}

				.card-body > p{
					font-size: 1.6rem;
					text-align: justify;
				}

.cont-explorer{
	margin: 9rem 0;
	background-color: var(--black);
}

	.sub-cont-explorer{
		padding: 9rem 3rem;
	}

		.explorer-title{
			text-align: center;
			color: var(--white);
			font-size: 3.6rem;
			font-family: "IbmPlexMono";
			margin-bottom: 13rem;
		}

			.explorer-aside{
				margin: 2rem 0;
				text-align: center;
			}

				.explorer{
					position: relative;
					display: inline-block;
					padding: 9rem 3.6rem;
					border: 0.1rem solid #2E2E2E;
					margin: 10rem 3rem 3rem 0;
					max-width: 25rem;
					max-height: 30rem;
					vertical-align: bottom;
				}.explorer > a{
					text-decoration: none;
					color: var(--white);
				}

				.explorer:hover{
					cursor: pointer;
					user-select: none;
				}.explorer:hover h3{
					color: var(--brown-2);
					font-weight: bold;
				}

					.explorer h3{
						color: var(--white);
						font-family: "IbmPlexMono";
						font-size: 2.3rem;
						margin-bottom: 3rem;
						transition: 400ms all ease;
					}

					.explorer p{
						letter-spacing: 0.1rem;
						line-height: 3.3rem;
						color: var(--gray-1);
						font-size: 1.9rem;
					}

					.explorer-picture{
						position: absolute;
						top: -12rem; left: 1.6rem;
						display: inline;
						border: 0.6rem solid var(--brown-2);
						border-radius: 50%;
						background-color: var(--black);
						transform: scale(0.6);
					}.explorer-picture img{
						position: relative;
						transform: scale(0.7);
						filter: invert(100%);
						overflow: hidden;
					}

@media screen and (max-width: 900px){
	.cont-articles-info{
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
	}

		.sub-info, .sub-info-1{
			flex-basis: 100%;
		}

		.sub-card{
			padding: 1rem 0.6rem;
		}

	.cont-cards{
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, auto);
		grid-auto-columns: 1fr;
		grid-auto-rows: auto;

		grid-column-gap: 0;
	}

	.article-info > h3, .sub-info-title, .sub-info > ul > li{
		text-align: center;
		list-style-position: inside;
	}.sub-info > ul{
		margin: 1.6rem 0;
	}

}

@media screen and (max-width: 620px){
	.explorer{
		margin: 10rem 0;
	}
}

@media screen and (max-width: 600px){
	.question-title{
		width: 86%;
		text-align: center;
		font-size: 2.3rem;
	}
}