.pages {
	width: 100%;
	height: fit-content;
	position: relative;
	padding-bottom: 1rem;

	

	.page {
		width: 100%;
		height: 100%;
		position: relative;

		section {
			padding: 0 0 1rem 0;
			position: relative;

			h2 {
				font-size: 200%;
				text-align: center;
			}

			p {
				text-align: center;
				font-size: 120%;
			}

			.backBtn {
				position: absolute;
				top: 0.5rem;
				right: 0.5rem;
				background-color: var(--l);
				color: var(--d);
				width: 50px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 150%;
				font-weight: bolder;
				border-radius: 10px;
				cursor: pointer;
			}
		}

		.cards {
			width: 100%;
			height: 100%;

			.card {
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 1rem;
				padding: 1rem;
				border-radius: 10px;
				height: fit-content;
				background-color: var(--b);
				color: var(--l);

				img {
					width: 100px;
					height: 100px;
					margin-left: auto;
					margin-right: auto;
					object-fit: contain;
				}

				h2 {
					padding-top: 1rem;
					text-align: center;
				}

				p {
					text-align: center;
					padding-bottom: 0.5rem;
				}

				.cta {
					width: 100%;
					background-image: var(--y);
					background-size: cover;
					background-position: center;
					display: block;
					width: 100%;
					text-align: center;
					padding: 0.5rem;
					color: var(--d);
					font-weight: bold;
					cursor: pointer;
				}
			}
		}
	}

	#page2 {
		position: absolute;
		top: 0;
		right: -200%;
		background-color: var(--d);
		transition: right 0.5s ease-in;
	}

	#page3 {
		position: absolute;
		width: 100%;
		top: 0;
		right: -200%;
		background-color: var(--b);
		transition: right 0.5s ease-in;
		padding: 1rem;
		color: var(--l);

		#form {
			min-width: 290px;
			width: 50%;
			margin-left: auto;
			margin-right: auto;

			h2 {
				text-align: center;
			}

			input,
			textarea {
				width: 100%;
				padding: 0.5rem;
				margin-bottom: 5px;
			}

			textarea {
				height: 15ch;
				resize: none;
			}

			.submit {
				width: 100%;
				padding: 0.5rem;
				color: var(--d);
				font-weight: bold;
				text-decoration: underline;
				background-image: var(--y);
				text-align: center;
			}
		}
	}
}

@media (min-width: 768px) {
	.pages {
		.page {
			.cards {
				display: flex;
				flex-wrap: wrap;

				.card {
					width: 30%;
				}
			}
		}
	}
}