@schukai/monster/source/components/style/card.css

Monster is a simple library for creating fast, robust and lightweight websites.

/** generated from card.pcss **/
.cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 22px;
}
.cards .card {
	align-content: stretch;
	align-items: stretch;
	background-color: var(--monster-bg-color-primary-1);
	border-radius: var(--monster-border-radius);
	border-style: var(--monster-border-style);
	border-width: var(--monster-border-width);
	box-sizing: border-box;
	color: var(--monster-color-primary-1);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	border-shadow: var(--monster-box-shadow-1);
	overflow: hidden;
}
:is(.cards .card) img {
	display: block;
	margin-left: 0;
	-o-object-fit: scale-down;
	object-fit: scale-down;
	overflow: hidden;
	padding: 0;
	width: 101%;
}
:is(:is(.cards .card) img):hover {
	box-shadow: var(--monster-box-shadow-2);
	transform: scale(1.05);
	transition: background .8s, color .25s .0833333333s;
}
:is(.cards .card) h1,
:is(.cards .card) h2,
:is(.cards .card) h3,
:is(.cards .card) h4,
:is(.cards .card) h5,
:is(.cards .card) h6,
:is(.cards .card) p {
	margin: 0;
	padding-left: 1rem;
	padding-right: 1rem;
}
:is(.cards .card) h1:last-child,
:is(.cards .card) h2:last-child,
:is(.cards .card) h3:last-child,
:is(.cards .card) h4:last-child,
:is(.cards .card) h5:last-child,
:is(.cards .card) h6:last-child,
:is(.cards .card) p:last-child {
	padding-bottom: 1rem;
}
:is(.cards .card) h1:first-child,
:is(.cards .card) h2:first-child,
:is(.cards .card) h3:first-child,
:is(.cards .card) h4:first-child,
:is(.cards .card) h5:first-child,
:is(.cards .card) h6:first-child,
:is(.cards .card) p:first-child {
	padding-top: 1rem;
}
:is(.cards .card) img + h1,
:is(.cards .card) img + h2,
:is(.cards .card) img + h3,
:is(.cards .card) img + h4,
:is(.cards .card) img + h5,
:is(.cards .card) img + h6,
:is(.cards .card) img + p {
	padding-top: 1rem;
}
:is(.cards .card) h1 + img,
:is(.cards .card) h2 + img,
:is(.cards .card) h3 + img,
:is(.cards .card) h4 + img,
:is(.cards .card) h5 + img,
:is(.cards .card) h6 + img,
:is(.cards .card) p + img {
	padding-bottom: 1rem;
}
:is(.cards .card) h1 + p,
:is(.cards .card) h2 + p,
:is(.cards .card) h3 + p,
:is(.cards .card) h4 + p,
:is(.cards .card) h5 + p,
:is(.cards .card) h6 + p,
:is(.cards .card) p + p {
	padding-top: 1rem;
}
:is(.cards .card) .button + h1,
:is(.cards .card) .button + h2,
:is(.cards .card) .button + h3,
:is(.cards .card) .button + h4,
:is(.cards .card) .button + h5,
:is(.cards .card) .button + h6,
:is(.cards .card) .button + p,
:is(.cards .card) button + h1,
:is(.cards .card) button + h2,
:is(.cards .card) button + h3,
:is(.cards .card) button + h4,
:is(.cards .card) button + h5,
:is(.cards .card) button + h6,
:is(.cards .card) button + p {
	padding-bottom: 1rem;
}
:is(.cards .card) h1 + .button,
:is(.cards .card) h1 + button,
:is(.cards .card) h2 + .button,
:is(.cards .card) h2 + button,
:is(.cards .card) h3 + .button,
:is(.cards .card) h3 + button,
:is(.cards .card) h4 + .button,
:is(.cards .card) h4 + button,
:is(.cards .card) h5 + .button,
:is(.cards .card) h5 + button,
:is(.cards .card) h6 + .button,
:is(.cards .card) h6 + button,
:is(.cards .card) p + .button,
:is(.cards .card) p + button {
	margin-top: 1rem;
}
:is(.cards .card) .button,
:is(.cards .card) button {
	border-left: none;
	border-right: none;
}
:is(.cards .card) .button:first-child,
:is(.cards .card) button:first-child {
	border-top: none;
}
:is(.cards .card) .button:last-child,
:is(.cards .card) button:last-child {
	border-bottom: none;
}
:is(
		:is(.cards .card) button:last-child,
		:is(.cards .card) .button:last-child
	):hover {
	box-shadow: var(--monster-box-shadow-2);
	transform: scale(1.05);
	transition: background .8s, color .25s .0833333333s;
}
.card:is(.cards .card):hover {
	box-shadow: var(--monster-box-shadow-2);
	transition: background .8s, color .25s .0833333333s;
	z-index: var(--monster-z-index-outline);
}