.entry-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: var(--entry-overlay-background, transparent);
	border-radius: var(--entry-border-radius, var(--border-radius)); /* taken from entry, mostly for background image */
	opacity: var(--entry-overlay-opacity, 0.6);
	transition: var(--transition);
}

.has-image-background {

	.has-image {
		color: var(--color-white);
		--entry-overlay-background: linear-gradient(var(--entry-overlay-background-direction, to bottom), var(--entry-overlay-color-start, var(--color-heading)) 0%, var(--entry-overlay-color-end, var(--color-heading)) 100%);
		--entry-wrap-color: var(--color-white);

		&.no-entry-link {
			--heading-color: var(--color-white);
		}

		&.has-entry-link {
			--entry-title-link-color: var(--color-white);
			--entry-title-link-color-hover: var(--color-white);
			--entry-title-text-decoration: none;
			--entry-title-text-decoration-hover: none;

			&:hover,
			&:focus-visible {
				--entry-overlay-opacity: var(--entry-overlay-hover-opacity, 0.8);
				--entry-overlay-background: linear-gradient(var(--entry-overlay-hover-background-direction, var(--entry-overlay-background-direction, to bottom)), var(--entry-overlay-hover-color-start, var(--entry-overlay-color-start, var(--color-heading))) 0%, var(--entry-overlay-hover-color-end, var(--entry-overlay-color-end, var(--color-heading))) 100%);
			}
		}
	}

	&[style*="--align-text-vertical:start"] .has-image {
		--entry-overlay-color-end: transparent;
	}

	&[style*="--align-text-vertical:end"] .has-image {
		--entry-overlay-color-start: transparent;
	}
}