.element-frame {
	/* Colors */
	--frame-bg: var(--color-secondary);
	--frame-text: var(--element-bg);
	--frame-shadow: var(--color-primary-inverse);
	--frame-border: var(--color-secondary-inverse);
	--frame-border-bg: var(--element-bg);
	--frame-border-focus: var(--color-black);
	--frame-disclaimer-bg: var(--element-bg);
	--frame-disclaimer-text: var(--element-text);

	/* Layout */
	--frame-overlay-gap: var(--size-3);
	--frame-content-offset: var(--size-20);
	--frame-content-width: 500px;
	--frame-content-play-gap: var(--size-12);
	--frame-border-width: calc(100% / 3);
	--frame-disclaimer-width: 60%;

	@media (min-width: 768px) {
		--frame-overlay-gap: var(--gap-lg);
		--frame-content-play-gap: var(--gap-lg);
		--frame-border-width: 25%;
	}

	@media (min-width: 1280px) {
		--frame-overlay-gap: var(--gap-3xl);
		--frame-content-play-gap: var(--gap-3xl);
	}

	/* Variants */
	&.secondary {
		--frame-bg: var(--color-primary);
		--frame-shadow: var(--color-secondary-inverse);
		--frame-border: var(--color-primary-inverse);
	}

	&.neutral {
		--frame-bg: var(--element-bg);
		--frame-text: var(--element-text);
		--frame-shadow: var(--element-text);
		--frame-border: var(--element-bg);
	}

	.frame-wrapper {
		position: relative;
		width: 100%;
		display: grid;
		grid-template-rows: auto;
		gap: var(--gap-md);
	}

	iframe,
	video {
		width: 100%;
		aspect-ratio: 16 / 9;
		display: block;
		grid-row: 1;
		grid-column: 1;
	}

	figcaption {
		grid-row: 3;
		margin-top: var(--padding-sm);
	}

	.frame-cover {
		grid-row: 1 / span 1;
		grid-column: 1;
		display: grid;
		transition: opacity 0.3s ease;
	}

	[data-frame-trigger] {
		cursor: pointer;
	}

	.frame-overlay-wrapper {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;

		button {
			width: 100%;
			padding: 0;
			border: none;
			background: none;
			appearance: none;
			display: grid;
			grid-template-columns: 1fr;

			@media (min-width: 768px) {
				position: relative;
			}
		}
	}

	/* Poster */
	.frame-poster-container {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		grid-row: 1;
		grid-column: 1;
		display: flex;
	}

	.frame-poster {
		width: 100%;
		height: 100%;

		img {
			width: 100%;
			object-fit: cover;
			display: block;

			/* safari fix: aspect ratio not working with image and border-overlay */
			height: 162px;

			@media (min-width: 768px) {
				height: 414px;
			}

			@media (min-width: 1280px) {
				height: 644px;
			}
		}
	}

	.frame-border {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: var(--frame-border-width);
		background-color: var(--frame-border-bg);
		pointer-events: none;
	}

	/* Buttons: map frame theme onto .btn */
	.frame-play-icon .btn,
	.disclaimer-button button {
		--element-bg: var(--frame-bg);
		--element-border-color: var(--frame-border-bg);
		--shadow-neutral: var(--frame-shadow);
		color: var(--frame-text);
	}

	/* Play icon */
	.frame-play-icon {
		border-radius: 100%;
		padding: 0;
		z-index: 1;
		min-width: 0;

		.btn {
			width: 120px;
			height: 120px;
			min-width: 0;
		}

		svg {
			width: var(--size-8);
			height: var(--size-8);

			@media (min-width: 356px) {
				width: var(--size-10);
				height: var(--size-10);
			}

			@media (min-width: 768px) {
				width: var(--size-18);
				height: var(--size-18);
			}
		}
	}

	.frame-play-icon--mobile {
		position: absolute;
		top: 50%;
		right: calc(var(--frame-border-width) / 2);
		transform: translate(50%, -50%);

		.btn {
			width: 84px;
			height: 84px;
		}

		@media (min-width: 768px) {
			display: none;
		}
	}

	.frame-play-icon--desktop {
		display: none;

		@media (min-width: 768px) {
			display: block;
			position: absolute;
			top: 50%;
			left: 100%;
			margin-left: var(--frame-content-play-gap);
			transform: translateY(-50%);
		}
	}

	/* Content */
	.frame-content {
		width: 100%;
		background-color: var(--frame-bg);
		border-radius: var(--radius-4xl);
		padding: var(--padding-xxs) var(--padding-xs);
		color: var(--frame-text);
		text-align: left;
		grid-row: 2;
		grid-column: 1;
		margin-top: calc(var(--padding-sm) * -1);
		z-index: 1;

		h3 {
			display: grid;
			gap: var(--gap-sm);
		}

		span {
			display: block;
		}

		@media (min-width: 768px) {
			position: absolute;
			right: calc(
				var(--size-18) + var(--padding-sm) * 2 +
					var(--frame-overlay-gap) + var(--frame-content-play-gap)
			);
			bottom: var(--frame-content-offset);
			width: var(--frame-content-width);
			margin-top: 0;
			padding: var(--padding-2sm) var(--padding-sm);
			/* Reset grid positioning on desktop */
			grid-row: 1;
		}
	}

	.frame-claim {
		font-size: var(--font-size-heading-xl);
		font-weight: var(--font-weight-bold);
		line-height: var(--lh-snug);

		@media (min-width: 1280px) {
			font-size: var(--font-size-heading-2xl);
			line-height: var(--lh-heading-2xl);
		}
	}

	.frame-title {
		font-size: var(--font-size-heading-2xl);
		font-weight: var(--font-weight-bold);
		line-height: 1.2857;

		@media (min-width: 1280px) {
			line-height: var(--lh-heading-2xl);
		}
	}

	/* Disclaimer */
	.frame-disclaimer {
		width: 100%;
		padding: var(--padding-md);
		background-color: var(--frame-disclaimer-bg);
		display: flex;
		justify-content: center;
		align-items: center;
		grid-row: 1;
		grid-column: 1;
	}

	.frame-disclaimer-content {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: var(--gap-lg);
		color: var(--frame-disclaimer-text);

		@media (min-width: 768px) {
			width: var(--frame-disclaimer-width);
		}
	}

	.frame-disclaimer-claim,
	.frame-disclaimer-title {
		font-size: var(--font-size-heading-lg);
		font-weight: var(--font-weight-bold);
		line-height: var(--lh-heading-lg);
	}

	.frame-disclaimer-claim {
		@media (min-width: 1280px) {
			line-height: var(--lh-heading-xl);
		}
	}

	.disclaimer-button {
		width: 100%;
		isolation: isolate;

		button {
			width: 100%;

			&:focus,
			&:focus-visible {
				outline: 3px solid var(--frame-border-focus);
				outline-offset: 1px;
			}
		}

		@media (min-width: 768px) {
			width: var(--frame-disclaimer-width);
			margin: 0 auto;
		}
	}

	/* Spotify */
	&.spotify {
		@media (max-width: 768px) {
			padding: 0;
		}

		iframe {
			aspect-ratio: 1144 / 384;
		}

		.frame-poster img {
			/* safari fix: aspect ratio not working with image and border-overlay */
			@media (min-width: 768px) {
				height: 300px;
			}

			@media (min-width: 1280px) {
				height: 384px;
			}
		}

		.frame-disclaimer-content {
			width: 100%;

			@media (min-width: 1280px) {
				display: grid;
				grid-template-columns: 1fr 384px;
				gap: var(--gap-xl);
				padding-left: var(--padding-xl);
				padding-right: var(--padding-xl);

				.frame-disclaimer-claim {
					grid-column: 1;
					grid-row: 1;
				}

				.frame-disclaimer-title {
					grid-column: 1;
					grid-row: 2;
				}

				.disclaimer-button {
					grid-row: 1 / span 2;
					display: flex;
					align-items: center;
				}
			}
		}
	}
}