/* -------------------------------- 

File#: _1_card-v2
Title: Card v2
Descr: Container of information used as teasers for further content, often displayed in a gallery of related items
Usage: codyhouse.co/license

-------------------------------- */
.card-v2 {
	position: relative;
	overflow: hidden
}

.card-v2 img {
	display: block;
}

.card-v2__caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: linear-gradient(hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0), hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 1));
	background-blend-mode: multiply;
	color: var(--color-white);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35)
}

.card-v2--blur-fx .card-v2__caption {
	background: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px)
}

a.card-v2 {
	display: block;
	text-decoration: none;
	transition: box-shadow 0.2s
}

a.card-v2:hover {
	box-shadow: var(--shadow-md)
}

/* -------------------------------- 

File#: _2_anim-cards
Title: Animated Cards
Descr: A collection of cards that slides over time
Usage: codyhouse.co/license

-------------------------------- */
:root {
	--anim-cards-width: 100px;
	--anim-cards-gap: var(--space-md)
}

@supports (--css: variables) {
	@media (min-width: 48rem) {
		:root {
			--anim-cards-width: 160px
		}
	}

	@media (min-width: 64rem) {
		:root {
			--anim-cards-width: 180px
		}
	}
}

.anim-cards {
	overflow: hidden;
	margin-top: var(--anim-cards-gap);
	margin-bottom: var(--anim-cards-gap)
}

.anim-cards__list {
	display: flex;
	overflow: auto
}

.anim-cards__item {
	float: left;
	width: var(--anim-cards-width);
	flex-shrink: 0;
	margin-right: var(--anim-cards-gap)
}

.anim-cards-control {
	display: inline-flex;
	width: 40px;
	height: 40px;
	background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.75);
	border-radius: 50%;
	transition: 0.2s
}

.anim-cards-control i {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
	margin: auto;
	color: var(--color-bg)
}

.anim-cards-control i::before,
.anim-cards-control i::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: currentColor;
	transition: -webkit-clip-path 0.2s var(--ease-out);
	transition: clip-path 0.2s var(--ease-out);
	transition: clip-path 0.2s var(--ease-out), -webkit-clip-path 0.2s var(--ease-out)
}

.anim-cards-control i::before {
	-webkit-clip-path: polygon(1px 1px, 5px 1px, 5px calc(100% - 1px), 1px calc(100% - 1px));
	clip-path: polygon(1px 1px, 5px 1px, 5px calc(100% - 1px), 1px calc(100% - 1px))
}

.anim-cards-control i::after {
	-webkit-clip-path: polygon(calc(100% - 5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
	clip-path: polygon(calc(100% - 5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px))
}

.anim-cards-control:hover {
	cursor: pointer;
	background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95)
}

.anim-cards-control[aria-pressed=true] i::before {
	-webkit-clip-path: polygon(2px 0%, 100% 50%, 100% 50%, 2px 100%);
	clip-path: polygon(2px 0%, 100% 50%, 100% 50%, 2px 100%)
}

.anim-cards-control[aria-pressed=true] i::after {
	-webkit-clip-path: polygon(calc(100% - 5px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
	clip-path: polygon(calc(100% - 5px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px))
}

.anim-cards:not(.anim-cards--anim-off) .anim-cards__list {
	overflow: visible;
	will-change: transform;
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}

.anim-cards--reverse:not(.anim-cards--anim-off) .anim-cards__list {
	flex-direction: row-reverse
}