.card {
	--padding: 1rem;

	display: flex;
	flex-direction: column;
	position: relative;

	background-color: var(--color-raised-bg);
	border-radius: var(--rounded-lg);
	box-shadow: var(--shadow-raised), var(--shadow-inset);

	padding: var(--padding);
	gap: 1rem;
	max-width: 100%;

	.profile-picture {
		z-index: 1;
	}

	&--gap {
		&-compressed {
			gap: 0.5rem;
		}

		&-none {
			gap: 0;
		}
	}

	&--pad {
		&-top {
			padding-top: 2.5rem;
		}
	}

	&__banner {
		--inverse-padding: calc(var(--padding) * -1);
		margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
		z-index: 0;
		background-color: var(--color-divider);
		height: 6.5rem; /* Matches height of 2 buttons exactly */
		object-fit: cover;
		object-position: center;
		border-radius: var(--rounded-top);

		&:-moz-loading {
			visibility: hidden;
		}

		&--dark {
			filter: brightness(0.7);
		}
	}

	&__overlay {
		position: absolute;
		top: 1rem;
		right: 1rem;

		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.5rem;

		z-index: 2;

		&--row {
			flex-direction: row;
		}
	}

	&--row {
		flex-direction: row;
		align-items: center;
	}

	&--strip {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	&--pad-x {
		--padding: 1rem 1.5rem;
	}

	&.markdown {
		--padding: 1.5rem;
	}

	p {
		line-height: 130%;
	}
}