/*? --------------------------------- BANNER --------------------------------- */
.background-hero-banner {
	background-image: linear-gradient(
			rgba(0, 0, 0, 0.2),
			rgba(0, 0, 0, 0.6)
		),
		url('../img/destination/banner-destination.avif');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	display: flex;
	align-items: center;

	height: 600px;

	.container-hero-banner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;

		h1 {
			color: #fff;
			font-size: 52px;
			font-weight: 500;
			font-family: var(--title-font);
			text-align: center;
		}

		p {
			text-align: center;
			width: 80%;
			font-size: 18px;
			color: #fff;
			font-weight: 300;
			line-height: 1.6;
		}
	}
}

/*? --------------------------------- MAIN --------------------------------- */
main.container {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 50px;
	margin-bottom: 50px;

	h2 {
		font-size: 32px;
		font-weight: 500;
		font-family: var(--title-font);
		color: var(--text-color-dark);
		text-align: center;
	}
}

.grid-cards-destination {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;

	.card-destination {
		height: 350px;
		border-radius: 20px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.content {
			padding: 20px;

			h3 {
				color: #fff;
				font-family: var(--title-font);
				font-weight: 500;
				font-size: 24px;
				text-align: center;
			}
		}
	}

	.background-1 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-1.avif);
		background-size: cover;
		background-position: center;
	}

	.background-2 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-2.avif);
		background-size: cover;
		background-position: center;
	}

	.background-3 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-3.avif);
		background-size: cover;
		background-position: center;
	}

	.background-4 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-4.avif);
		background-size: cover;
		background-position: center;
	}

	.background-5 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-5.avif);
		background-size: cover;
		background-position: center;
	}

	.background-6 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-6.avif);
		background-size: cover;
		background-position: center;
	}

	.background-7 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-7.avif);
		background-size: cover;
		background-position: center;
	}

	.background-8 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-8.avif);
		background-size: cover;
		background-position: center;
	}

	.background-9 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-9.avif);
		background-size: cover;
		background-position: center;
	}

	.background-10 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-10.avif);
		background-size: cover;
		background-position: center;
	}

	.background-11 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-11.avif);
		background-size: cover;
		background-position: center;
	}

	.background-12 {
		background-image: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.5) 20%,
				rgba(0, 0, 0, 0) 80%
			),
			url(../img/destination/destination-12.avif);
		background-size: cover;
		background-position: center;
	}
}

.container-pagination {
	margin-top: 30px;
	align-self: center;

	display: flex;
	gap: 15px;

	a {
		text-decoration: none;
		width: 40px;
		height: 40px;
		border-radius: 5px;
		font-weight: 700;
		color: var(--text-color);
		border: 1px solid var(--primary-color);

		display: flex;
		justify-content: center;
		align-items: center;

		&.active,
		&.next {
			background-color: var(--primary-color);
			color: #fff;
			border: 1px solid transparent;
		}
	}
}