src_front/less/card.less
.card-item {
	@padding: .5em;
	overflow: hidden;
	padding: @padding;
	border-radius: var(--border-radius);
	background-color: var(--background-color-fadest);

	& > .header {
		display: flex;
		flex-direction: row;
		background-color: var(--background-color-fader);
		transition: all .2s;
		margin: -@padding;
		margin-bottom: 0;
		gap: .5em;
		padding: .5em;
		
		& > .icon {
			height: 2em;
			margin-top: -.5em;
			margin-left: -.5em;
			margin-bottom: -.5em;
			border-top-right-radius: 50%;
			border-bottom-right-radius: 50%;
			border-left: none;
		}
		& > .title {
			align-self: center;
			flex-grow: 1;
			text-align: center;
			color: var(--color-text);
			overflow-wrap: break-word;
			overflow: hidden;
			line-height: 1.3em;
			font-weight: bold;
			.icon {
				height: 1em;
				margin-right: .5em;
			}
		}
	}
	
	&.primary {
		color: var(--color-light);
		background-color: var(--color-primary);
		& > .header {
			background-color: var(--color-primary-light);
			// .title {
			// 	color: var(--color-dark);
			// }
		}
		a:not(.button) {
			color: var(--color-light);
			text-decoration: underline;
			&:hover {
				text-decoration: none;
			}
		}
		a {
			color:#fff;
		}
	}
	
	&.secondary {
		color: var(--color-text-light);
		background-color: var(--color-secondary);
		& > .header {
			background-color: var(--color-secondary-light);
		}
		a:not(.button) {
			color: var(--color-light);
			text-decoration: underline;
			&:hover {
				text-decoration: none;
			}
		}
		a {
			color:#fff;
		}
	}
	
	&.alert {
		color: var(--color-text-light);
		background-color: var(--color-alert);
		& > .header {
			background-color: var(--color-alert-light);
		}
		a:not(.button) {
			color: var(--color-light);
			text-decoration: underline;
			&:hover {
				text-decoration: none;
			}
		}
		a {
			color:#fff;
		}
	}
	
	&.premium {
		color: var(--color-text-light);
		background-color: var(--color-premium);
		& > .header {
			background-color: var(--color-premium-light);
		}
		a:not(.button) {
			color: var(--color-light);
			text-decoration: underline;
			&:hover {
				text-decoration: none;
			}
		}
		a {
			color:#fff;
		}
	}

	&.dark {
		@scale:2px;
		box-shadow: inset -@scale -@scale @scale rgba(255, 255, 255, 0.1), inset @scale @scale @scale rgba(0, 0, 0, .3) !important;
		background-color: var(--grayout-fadest);
	}
}