.stories-tab {
	--sw-icon-color: var(--green-light);

	position: relative;
	color: var(--white);
	
	.widget-inner {
		display: none;
		opacity: 0;
		visibility: hidden;
	}
	
	&.in .widget-inner {
		opacity: 0;
		visibility: hidden;
	}

	&.active .widget-inner,
	&.in .widget-inner,
	&.out .widget-inner {
		display: block;
	}

	&.active .widget-inner,
	&.out .widget-inner {
		opacity: 1;
		visibility: visible;
	}

	&.in .widget-inner {
		animation: fade-in 0.3s ease 0s 1 normal forwards;
	}

	&.out .widget-inner {
		animation: fade-out 0.3s ease 0s 1 normal forwards;
	}

	.slides {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--space-5);
	}

	.slide,
	.slide-top,
	.img-cont,
	.slide-img,
	.content-section {
		position: relative;
	}

	.slide {
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
	}

	.slide-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.slide-top,
	.content-section {
		grid-area: 1 / 1 / 1 / 1;
	}

	.img-cont::before {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: block;
		content: '';
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.55) 100%);
		pointer-events: none;
	}

	.slide-img {
		width: 100%;
	}

	.content-section {
		z-index: 4;
		align-self: end;
		padding: 15px;
		text-shadow: 0px var(--space-1) 10px rgba(0, 0, 0, 0.25);
		pointer-events: none;

		a,
		button {
			pointer-events: all;
		}
	}

	.info-flag {
		display: block;
		margin-bottom: var(--space-3);
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-xs);
		line-height: 1.3;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--gold-lighter);

		&::after {
			display: block;
			width: var(--space-10);
			height: 2px;
			margin-top: 6px;
			content: '';
			background: var(--gold-lighter);
		}
	}

	.slide-title {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: 1.0625rem;
		line-height: 1.2;
		color: inherit;
	}

	.details {
		margin-top: var(--space-3);
		font-size: 0.8125rem;
		color: var(--white);
	}
	
	.details a {
		font: inherit;
		text-decoration: none;
		color: inherit;
	}

	@media (hover: hover) {
		.details a:hover {
			text-decoration: underline;
		}
	}

	@media (min-width: 40em) {
		.slides {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			padding-bottom: var(--space-10);
		}

		.slide:nth-child(even) {
			translate: 0 var(--space-10);
		}
	}

	@media (min-width: 64em) {
		.slides {
			gap: var(--space-10);
		}

		.content-section {
			padding: 25px 30px;
		}

		.info-flag {
			font-size: var(--text-sm);
		}

		.slide-title {
			font-size: 1.375rem;
		}

		.details {
			font-size: 0.9375rem;
		}
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		visibility: hidden;
	}
	to {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
		visibility: visible;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}