.promo-card {
	margin-block: 1rem;
	display: grid;
	position: relative;
	z-index: 1;
}

.promo-card > .link {
	display: block;
	position: relative;
	z-index: 1;
	color: transparent;
	user-select: none;
}

.promo-card > .graphic,
.promo-card > .code {
	border: var(--border);
	border-width: var(--border-2);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.promo-card > :is(.title, .graphic),
.promo-card > :is(.title, .graphic) * {
	transition-duration: .2s;
}

.promo-card > .title [class*='fa-'] {
	transition-duration: .3s;
}

.promo-card.title.link:hover > .title [class*='fa-'] {
	transform: translateX(.5rem);
}

/* VARIATIONS */

.promo-card > :is(.graphic, .title, .link) { grid-column: 1; }
.promo-card > .graphic { grid-row: 1; }
.promo-card > .title { grid-row: 2; }
.promo-card > .link { grid-row: 1 / 3; }

.promo-card:not(.graphic) > .graphic,
.promo-card:not(.link) > .link,
.promo-card:not(.code) > .code,
.promo-card.code > :is(.link,.graphic,.title) 
{ display: none; }

.promo-card.graphic:not(.title) > .title {
	z-index: -1;
	grid-row: 1;
}

/* PromoCard with Product List */

.promo-card.title + .pl {
	margin-top: calc(var(--padding) * -.5);
}

/* PromoCard with graphic */

.promo-card.graphic.link:hover > .graphic {
	transform: translateY(-.15rem);
	box-shadow: 0 .45rem .65rem #0002;
}

.promo-card.graphic img:is(.wide, .tall) {
	width: 100%;
}

/* graphic with overlaid title */

.promo-card.overlay > .graphic {
	background: #000;
}

.promo-card.overlay > .graphic img {
	opacity: .85;
}

.promo-card.overlay > .title {
	align-items: center;
	align-self: stretch;
	border-bottom: 0;
	color: white;
	display: grid;
	font-size: calc(var(--font-size-4) * .9);
	margin: 0;
	text-align: center;
	text-shadow: var(--shadow);
	z-index: 1;
	grid-row: 1;
}

.promo-card.overlay > .title h2 {
	font-size: inherit;
}

.promo-card.overlay > .title * {
	color: inherit;
}

.promo-card.overlay > .title [class*='fa-'] {
	margin-right: -1em;
}

.promo-card.overlay.link:hover > .title {
	transform: translateY(-.25rem) scale(1.01);
}

/* no graphic */

.promo-card.title:not(.graphic) > .title {
	max-width: unset;
	border-bottom: var(--border);
}

/* mobile */

@media (max-width: 40rem) {
	.promo-card > .graphic .wide {
		display: none;
	}
}

/* desktop */

@media (min-width: 40rem) {
	.promo-card > .graphic .tall {
		display: none;
	}
}