
.paired-card-grid__card {
	background-color: rgba(0, 0, 0, 0);
}

.paired-card-grid__card .paired-card-grid__card-content {
	--tw-bg-opacity: 1;
	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
	will-change: transform;
	border-radius: .75rem;
	transition-property: none;
	transition-duration: 0s;
	transform: translateZ(0);
}

.paired-card-grid__card:active {
	opacity: .8;
	transition-property: none;
	transition-duration: 0s;
}

.paired-card-grid__card:active .paired-card-grid__card-icon {
	transition-duration: 0s;
}

@media (min-width:768px) {
	.paired-card-grid__card, .paired-card-grid__card .paired-card-grid__card-content {
		height: 100%;
	}
}

@media (min-width:1024px) {
	.paired-card-grid__card .paired-card-grid__card-content {
		--tw-translate-y: 0px;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
		transition-property: transform, box-shadow;
		transition-duration: .5s;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	}
	
	.paired-card-grid__card:hover:not(:active) .paired-card-grid__card-content {
		--tw-translate-y: -2px;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
		--tw-shadow: 0 6px 14px rgba(0, 0, 0, .08);
		--tw-shadow-colored: 0 6px 14px var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
		transition-duration: .15s;
	}
	
	.paired-card-grid__card:focus-visible:not(:active) .paired-card-grid__card-content {
		--tw-translate-y: -2px;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
		--tw-shadow: 0 6px 14px rgba(0, 0, 0, .08);
		--tw-shadow-colored: 0 6px 14px var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
		transition-duration: .15s;
	}
	
	.paired-card-grid__card:hover .paired-card-grid__card-arrow {
		--tw-translate-x: 3px;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
		transition-duration: .2s;
	}
	
	.paired-card-grid__card:focus-visible .paired-card-grid__card-arrow {
		--tw-translate-x: 3px;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
		transition-duration: .2s;
	}
	
	.paired-card-grid__card:active {
		opacity: 1;
		transition-property: all;
		transition-duration: 0s;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	}
	
	.paired-card-grid__card:active .paired-card-grid__card-content {
		--tw-translate-y: 0px;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
		--tw-shadow: 0 0 rgba(0, 0, 0, 0);
		--tw-shadow-colored: 0 0 rgba(0, 0, 0, 0);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
		transition-duration: 0s;
	}
}
