/* ==========================================================
   WEITERE INTERESSANTE ARTIKEL
   ========================================================== */

.newatours-related-articles {
	--newa-related-navy: #0e2a47;
	--newa-related-gold: #b08d57;

	--newa-related-title: var(--newa-related-navy);
	--newa-related-title-hover: var(--newa-related-gold);

	--newa-related-link: var(--newa-related-gold);
	--newa-related-link-hover: var(--newa-related-navy);

	--newa-related-gap: 24px;
	--newa-related-image-hover-scale: 1.04;

	width: 100%;
}




.newatours-related-articles__grid {
	display: grid;
	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: var(--newa-related-gap);
}


.newatours-related-card {
	min-width: 0;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid rgba(14, 42, 71, 0.12);
	border-radius: 10px;

	box-shadow:
		0 8px 24px
		rgba(14, 42, 71, 0.08);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.newatours-related-card:hover {
	transform: translateY(-3px);

	box-shadow:
		0 12px 30px
		rgba(14, 42, 71, 0.13);
}


.newatours-related-card__image-link {
	display: block;

	color: inherit;
	text-decoration: none;
}


.newatours-related-card__image {
	position: relative;

	width: 100%;
	aspect-ratio: 4 / 3;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#eef1f4,
			#dde3e8
		);
}


.newatours-related-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.4s ease;
}


.newatours-related-card:hover
.newatours-related-card__image img {
	transform:
		scale(
			var(
				--newa-related-image-hover-scale,
				1.04
			)
		);
}


.newatours-related-card__image-fallback {
	width: 100%;
	height: 100%;

	background:
		linear-gradient(
			135deg,
			rgba(14, 42, 71, 0.10),
			rgba(176, 141, 87, 0.18)
		);
}


.newatours-related-card__content {
	padding: 17px 18px 19px;
}


.newatours-related-articles .newatours-related-card .newatours-related-card__title {
	margin: 0 0 12px;

	font-family: "Marcellus", serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}


.newatours-related-articles .newatours-related-card .newatours-related-card__title > a {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;

	color: var(--newa-related-title);

	text-decoration: none !important;

	transition:
		color 0.2s ease;
}


.newatours-related-articles .newatours-related-card:hover
.newatours-related-card__title > a,
.newatours-related-articles .newatours-related-card__title > a:hover,
.newatours-related-articles .newatours-related-card__title > a:focus {
	color: var(--newa-related-title-hover) !important;
	text-decoration: none !important;
}


.newatours-related-articles .newatours-related-card .newatours-related-card__more,
.newatours-related-articles .newatours-related-card .newatours-related-card__more:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	color: var(--newa-related-link, #b08d57) !important;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;

	text-decoration: none !important;

	transition:
		color 0.2s ease;
}


.newatours-related-articles .newatours-related-card .newatours-related-card__more:hover,
.newatours-related-articles .newatours-related-card .newatours-related-card__more:focus {
	color: var(--newa-related-link-hover, #0e2a47) !important;
	text-decoration: none !important;
}


.newatours-related-card__arrow {
	display: inline-block;

	transition:
		transform 0.2s ease;
}


.newatours-related-card__more:hover
.newatours-related-card__arrow,
.newatours-related-card__more:focus
.newatours-related-card__arrow {
	transform: translateX(3px);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

	.newatours-related-articles__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* ==========================================================
   MOBILE – HORIZONTALER SWIPE
   ========================================================== */

@media (max-width: 767px) {



	.newatours-related-articles__grid {
		display: flex;

		gap: var(--newa-related-gap);

		overflow-x: auto;
		overflow-y: hidden;

		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;

		-webkit-overflow-scrolling: touch;

		padding-bottom: 10px;

		scrollbar-width: thin;
	}


	.newatours-related-card {
		flex:
			0 0
			min(84vw, 330px);

		scroll-snap-align: start;
	}


	.newatours-related-card:hover {
		transform: none;
	}

}