/* BEGIN: ICON CLASS //////////////////////////////////////////////////////// */

.icon {

/* 	border: var( --border ); */
	border: 0;
	border-radius: var( --border-radius );
	display: grid;
	height: var( --fbs );
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	place-items: center;
	width: var( --fbs );

}

	.icon > * {

		height: calc( var( --fbs ) * 0.5 );
		width: calc( var( --fbs ) * 0.5 );

	}

	.icon > svg > path {

		fill: var( --clr-white );

	}

/* END: ICON CLASS ////////////////////////////////////////////////////////// */

/* BEGIN: LINK CLASS //////////////////////////////////////////////////////// */

.link {

	align-items: center;
	color: var( --clr-purple );
	color: var( --clr-green );


}

	.link > span {

		white-space:nowrap;

	}

	.link svg {

		height: 1em;
		margin: 0 calc( var( --lh-gap-half ) * 0.5 );
		margin-bottom: calc( var( --lh-gap-half ) * -0.5 );

	}

	.link svg > path {

		fill: var( --clr-purple );
/* 		fill: var( --clr-green ); */

	}

.link.backlit {

/* 	color: var( --clr-purple ); */

	transition: color var( --anim-short-dur );
}


.link.backlit:hover {

	color: var( --clr-purple );
}

/* END: LINK CLASS ////////////////////////////////////////////////////////// */

/* BEGIN: UNIT CLASS //////////////////////////////////////////////////////// */

.unit {

	align-content: start;
	column-gap: calc( var( --gap-big ) );
	display: grid;
	row-gap: calc( var( --gap ) );
	padding: var( --gap-big );

}

	.unit > .header {

		font-size: 1em;

	}

		.unit > .header > .title {

			align-items: center;
			color: var( --clr-blue );
			display: grid;
			grid-template-columns: auto 1fr;
			font-size: var( --fs-title );
			font-weight: var( --fw-title );
			height: var( --fbs );

		}

			.unit > .header > .title > .icon {

				background-color: var( --clr-blue );
				margin-right: var( --gap-small );

			}

			.unit > .header > .title > .text {

				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

			}

		.unit > .header > .subtitle {

			color: var( --clr-blue );
			display: block;
			font-size: 1em;
			font-weight: var( --fw-subtitle );
			margin-top: var( --gap-smaller );

		}

	.unit > .footer {

		display: grid;
		justify-content: end;
		text-align: right;

	}

		.unit > .footer > * {

			color: var( --clr-blue );

		}

			.unit > .footer > a {

				margin-top: 0.375em;
			}

					.unit > .footer > .link > span > svg {

						transform: rotate(90deg) scale( 1.2 );
						margin-right: -0.3em;

					}


@media ( min-width: 640px ) {

	.unit {

		padding: var( --gap-big ) var( --gap-big-combined );

	}

}

@media ( min-width: 1280px ) {

	.unit {

		grid-template-columns: 1fr 1fr;

	}

		.unit > .header {

			grid-column: 1 / 3;

		}

		.unit > .footer {

			grid-column: 1 / 3;

		}

		.unit > .frame {

			grid-column: 1 / 3;

		}

}

/* END: UNIT CLASS ////////////////////////////////////////////////////////// */

/* BEGIN HEADER UNIT CLASS ////////////////////////////////////////////////// */

header.unit {

	row-gap: var( --gap-small );

}

@media ( min-width: 1280px ) {

	header.unit > * {

/* 		grid-column: 1 / 3; */

	}

}

/* END: HEADER UNIT CLASS /////////////////////////////////////////////////// */

/* BEGIN: FOOTER UNIT CLASS ///////////////////////////////////////////////// */

footer.unit > .header > .title {

	color: var( --clr-green );

}

	footer.unit > .header > .title > .icon {

		background-color: var( --clr-green );
		border-color: var( --clr-green );

	}

footer.unit > .header > .subtitle {

	color: var( --clr-green );

}

/* END: FOOTER UNIT CLASS /////////////////////////////////////////////////// */


.img-links {

	display: grid;
	column-gap: var( --gap-big );
	grid-template-columns: 1fr 1fr;
	row-gap: calc( var( --gap )  );

}

		.img-links > .frame > figure > figcaption {
			/*position: static;
			text-align: left;
			display: block;
			left: 0;*/

		}

		.img-links > div > a {

			display: block;
			width: 100%;
			color: var( --clr-blue );
			margin-top: var( --gap-smallest );
			transition: color var( --anim-short-dur ) ease-in-out;

		}

		.img-links > div:hover > a {
				color: var( --clr-purple );
		}

			.img-links > div > a > img {

				border: var( --border );
				border-radius: var( --border-radius );
				display: block;
				height: auto;
				width: 100%;

			}

			.img-links > div:hover > a > img {
/* 				border-color: var( --clr-purple ); */
			}

			.img-links > div > a > .break {
				display: block;
			}

.img-links .link svg {
	margin-left: -0.5em;
	margin-right: -0.25em;
/* 	color: var( --clr-blue ); */
}

@media ( min-width: 640px ) {

	.img-links > div > a > .break {
		display: inline-block;
	}

}

@media ( min-width: 1280px ) {

	.img-links {

		grid-column: 1 / 3;

	}

}