.scards {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content-visibility: auto;
	contain-intrinsic-size: auto 40rem;
}

.scards__grid {
	align-items: stretch;
}

.scards .carousel-dots {
	display: flex;
	margin-top: 2.25rem;
}

@media (min-width: 1025px) {
	.scards .carousel-dots {
		display: none;
	}
}

.scards__card {
	flex: 0 0 calc((100% - 3rem) / 3);
	position: relative;
	display: block;
	aspect-ratio: 1117 / 1408;
	border-radius: 1.5rem;
	overflow: hidden;
	background-color: var(--color-primary);
	isolation: isolate;

	&:hover .scards__image,
	&:focus-visible .scards__image {
		transform: scale(1.05);
	}

	&:hover .scards__btn,
	&:focus-visible .scards__btn {
		background-color: color-mix(in oklch, var(--color-accent), black 12%);
	}

	&:focus-visible {
		outline: 3px solid var(--color-accent);
		outline-offset: 3px;
	}
}

.scards__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	z-index: -1;
}

.scards__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 47, 72, 0.35) 0%, rgba(10, 47, 72, 0.15) 45%, rgba(10, 47, 72, 0.75) 100%);
}

.scards__title {
	position: absolute;
	top: 50%;
	left: 1.75rem;
	right: 1.75rem;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1rem 1.25rem;
	border: 1.5px solid rgba(250, 102, 42, 0.55);
	border-radius: 0.875rem;
	background: rgba(10, 47, 72, 0.2);
	backdrop-filter: blur(2px);
	font-family: var(--font-primary);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	color: var(--color-white);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);

	&::after {
		content: '';
		width: 2.5rem;
		height: 2px;
		background-color: var(--color-accent);
	}
}

.scards__btn {
	position: absolute;
	bottom: 1.75rem;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 2.25rem;
	border-radius: 2rem;
	background-color: var(--color-accent);
	font-family: var(--font-primary);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--color-white);
	transition: background-color 0.2s;
}

@media (max-width: 1024px) {
	.scards__card {
		flex: 0 0 calc((100% - 1.5rem) / 2);
	}

	.scards__title {
		font-size: 1.375rem;
		left: 1.25rem;
		right: 1.25rem;
	}

	.scards__btn {
		padding: 0.55rem 1.5rem;
		font-size: 1rem;
	}
}

@media (max-width: 640px) {
	.scards__card {
		flex: 0 0 100%;
	}

	.scards__title {
		font-size: 1.625rem;
	}
}