.carousel {
	margin-right: -2rem;
	@media screen and (min-width: 768px) {
		margin-right: 0;
	}
}

.carousel-contents {
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
	width: 100%;
	overflow-x: scroll;
	overflow-y: visible;
	padding: 0.5rem 0.5rem;
	margin-left: -0.5rem;
	@media screen and (min-width: 768px) {
		gap: 3rem;
		overflow-x: visible;
		flex-wrap: wrap;
		width: 100%;
	}
}

.carousel-card {
	width: 100%;
	min-width: 21.9rem;
	height: 100%;
	height: 35.5rem;
	background-color: var(--silver);
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	&.carousel-card-article {
		justify-content: flex-end;
	}
	@media screen and (min-width: 768px) {
		min-width: calc((100% / 3 - 3rem) + (3rem/3));
		width: calc((100% / 3 - 3rem) + (3rem/3));
		
	}
	@media screen and (min-width: 992px) {
		max-width: calc((100% / 3 - 3rem) + (3rem/3));
		height: 42rem;
	}
	.carousel-card-text {
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		color: var(--text);
	}
	.carousel-heading {
		font-family: 'Lora', serif;
		font-size: 2.8rem;
		line-height: 120%;
	}

	.carousel-top {
		position: relative;
		display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        overflow: hidden;
		img {
			max-width: 100%;
			height: auto;
		}
	}

	.carousel-bottom {
		overflow: hidden;
		width: 100%;
		min-height: 5.5rem;
		position: relative;
		img {
			width: 100%;
			height: auto;
		}
	}

	img.carousel-button {
		border: 1px solid var(--green);
		border-radius: 100%;
		background-color: white;
		width: 4rem;
		height: 4rem;
		right: 1.5rem;
		bottom: 1.5rem;
		position: absolute
	}

	a::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		cursor: pointer;
	}
	
	a:hover::before, a:focus::before {
		outline: 5px auto var(--sky);
		outline: 5px auto -webkit-focus-ring-color;
		outline-offset: 2px;
	}

	a:focus, a:hover {
		outline: none;
		text-decoration: none;
	}


	&.dark {
		.carousel-card-text {
			color: white;
		}
	}
}