.visual {
	position: relative;
	margin-bottom: 4rem;
	overflow: hidden;

	figure img {
		width: 90%;
		height: auto;
		clip-path: polygon(0% 0%, 0% 100%, 100% 80%, 100% 0%);
		@media screen and (max-width: 767px) {
			width: 95%;
		}
	}

	.no-image {
		aspect-ratio: 16 / 9;
		background-color: #ccc;
	}

	.visual-text {
		position: absolute;
		right: 1em;
		bottom: 1.5em;
		z-index: 1;

		color: #fff;
		font-weight: 500;
		font-style: italic;
		text-transform: uppercase;
		line-height: 1.5;

		font-size: max(1rem, 3vw);

		display: grid;
		gap: 0.5rem;

		@media screen and (max-width: 767px) {
			font-size: max(1.0rem, 3vw);
			gap: 0.2rem;
		}

		& > * {
			padding-inline: 0.5em;
			background-color: oklch(var(--theme-accent));
			margin: 0 0 0 auto;
			width: max-content;
			opacity: 0;
			animation: slide-in 0.5s ease forwards;
		}

		& > :nth-child(1) {
			font-size: 1.33em;
			background-color: #000;
			--translate-to: -3em;
			animation-delay: 0.5s;
		}

		& > :nth-child(2) {
			animation-delay: 0.6s;
		}

		& > :nth-child(3) {
			--translate-to: -5em;
			animation-delay: 0.7s;
		}

		& > :nth-child(4) {
			--translate-to: -1em;
			animation-delay: 0.8s;
		}

		@media screen and (max-width: 767px) {
			position: relative;
			bottom: 0.9em;
		}
	}

	@media screen and (max-width: 767px) {
		margin-bottom: 2rem;
	}
}

.acf-block-preview {
	.visual {
		.visual-text span {
			opacity: 1 !important;
			background-color: #555;

			&:first-child {
				background-color: #000;
			}
		}
	}
}