* {
	box-sizing: border-box;
}
wrapper-scroll {
	margin: 0;
	display: grid;
	overflow-x: hidden;
	font-family: "Righteous", sans-serif;
	scroll-behavior: smooth;
}
.container-scroll {
	min-block-size: 100vh;
	background-color: #e0bfbf;
   /* for animation */
	view-timeline-name: var(--name);
}
.container-scroll:nth-child(even) {
	background-color: #3b4631;
}
.masthead {
	max-inline-size: 100%;
	block-size: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-inline: 1rem;
}
.masthead__title {
	text-transform: uppercase;
   /* animation */
	animation: scale-up both linear, fade-away both linear;
	animation-timeline: var(--name);
	animation-range: entry-crossing 70% exit 90%, exit 10% exit 70%;
}
.texto-scroll-down h2 {
	will-change: transform, opacity;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
	transition: opacity 0.5s;
	color: black;
   /* Setting the text color to black */
}
@keyframes flying {
	to {
		translate: 0 -5vh;
   }
}
@keyframes scale-up {
	100% {
		top: 0;
		scale: 5;
   }
}
@keyframes fade-away {
	100% {
		opacity: 0;
   }
}
.two-columns {
	overflow: hidden;
	max-inline-size: 80ch;
	margin-inline: auto;
	block-size: 100%;
	padding: 3rem 1rem;
}
.two-columns .content-scroll {
	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	place-content: center;
	gap: 2rem;
}
.two-columns .content-scroll .cards-scroll {
	margin-block-start: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.two-columns .content-scroll .cards-scroll .card-scroll {
	box-shadow: inset 0 0 0.125rem #000;
   /* animation */
	animation: show both linear;
	animation-timeline: var(--name);
	animation-range: entry-crossing var(--range-start);
}
.two-columns .content-scroll .cards-scroll .card-scroll:nth-of-type(1) {
	--range-start: 10%;
}
.two-columns .content-scroll .cards-scroll .card-scroll:nth-of-type(2) {
	--range-start: 40%;
}
.two-columns .content-scroll .cards-scroll .card-scroll:nth-of-type(3) {
	--range-start: 70%;
}
.two-columns .content-scroll .cards-scroll .card-scroll:not(:last-of-type) {
	margin-block-end: 2rem;
}
.two-columns .content-scroll .cards-scroll .card-scroll * {
	margin: 0;
	padding-inline: 1rem;
}
.two-columns .content-scroll .cards-scroll .card-scroll .title-scroll {
	padding-block-start: 1rem;
}
.two-columns .content-scroll .cards-scroll .card-scroll .subtitle-scroll {
	padding-block-start: 0.25rem;
	padding-block-end: 1rem;
	opacity: 0.5;
}
.two-columns .content-scroll .cards-scroll .card-scroll p {
	padding-block-end: 1rem;
}
.two-columns .preview-scroll {
	position: relative;
	margin-block: 2rem;
	block-size: calc(100% - 1rem);
}
.two-columns .preview-scroll .img-scroll {
	left: var(--translateX);
	block-size: inherit;
	min-block-size: 24rem;
	object-fit: cover;
	background-image: url('/placeholder.jpg');
	background-size: cover;
	background-position: center;
}
@media (min-width: 48rem) {
	.two-columns {
		--columns: 2;
		--translateX: 150%;
   }
	.two-columns .preview-scroll .img-scroll {
		position: absolute;
		top: 0;
		aspect-ratio: 0.5;
	   /* animation */
		animation: fade-right both linear;
		animation-timeline: scroll(root);
		animation-range: entry 5% exit 90%;
   }
}
@keyframes fade-right {
	to {
		left: 0;
   }
}
@keyframes show {
	from {
		opacity: 0;
   }
	to {
		opacity: 1;
   }
}