.frame {

	--mb-from: calc( var(--fs-from ) * var( --ar ) * var( --ar ) );
	--mb-to: calc( var( --gap-to ) / var( --ar ) );

	--mb: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --mb-to ) - var( --mb-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --mb-from ) * 1px );


	display: grid;
/* 	overflow: hidden; */
	margin-bottom: var( --gap-small );
	margin-bottom:var( --mb );
	margin-bottom: 0;
}

	.frame > figure {

		align-self: start;
		display: grid;
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		position: relative;

	}

		.frame > figure > div {

				border: var( --border );
				border-radius: var( --border-radius );
				overflow: hidden;
		}

			.frame > figure > div > img {

				display: block;
				filter: opacity(0%) blur(100px) saturate(400%);
				height: auto;
				width: 100%;
				will-change: filter;
				overflow: hidden;

			}

			.frame > figure:last-of-type > div > img {

				filter: opacity(100%) blur(0px) saturate(100%);

			}

		.frame > figure > figcaption {
display: none;
			bottom: calc( ( var( --lh-px ) + var( --gap-smallest ) ) * -1 );
/* 			bottom: calc( var( --lh-px ) * 1.125 * -1 ); */
/* 			bottom: calc( ( var( --lh-px ) + var( --gap ) ) * -1 ); */
			color: var( --clr-blue );
/* 			color: white; */
			font-weight: var( --fw-subtitle );
			right: 0;
			margin-top: var( --gap-smallest );
			position: absolute;
			text-align: right;
			transform: scaleX( 0 );
			transform-origin: right top;
/* 			opacity: 0; */

		}

		.frame > figure:last-of-type > figcaption {

			transform: scaleX( 1 );
/* 			opacity: 1; */

		}

/*

header.unit > .frame {

	--height: calc( 100vh - var( --gap-big ) * 2 - var( --fbs )
		- var( --gap-small ) - var( --gap-smaller ) - var( --lh-px ) * 2 );

	height: var( --height );

}

		header.unit > .frame > figure > div {

			height: var( --height );
			display: grid;

		}

			header.unit > .frame > figure > div > img {

				align-self: center;
				height: var( --height );
				justify-self: center;
				width: auto;

			}

			header.unit > .frame.horizontal > figure > div > img {

				width: 100%;
				height: auto;

			}

			header.unit > .frame > figure > div > iframe {

				border: 0;
				display: block;
				height: 100%;
				width: 100%;

			}

			*/