@import "_variables";

.card {
	display: flex;
	flex-direction: row;

	overflow: hidden;
	background: #ffffff;
	margin-bottom: 24px;

	border-radius: 16px;
	border: 1px solid #d4d4d4;

	@media only screen and (max-width: 1120px) {
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	@media only screen and (max-width: var(--mobile-breakpoint)) {
		flex-direction: column;
		border-left: none;
		border-right: none;
		height: auto;
		margin-bottom: 30px;

		.card-column {
			border-right: none !important;
			border-bottom: 1px solid #e9ecef;
		}
	}

	:root[data-theme="dark"] & {
		background: #1d2026;
		border-color: #222;
	}

	@media (prefers-color-scheme: dark) {
		:root[data-theme="auto"] & {
			background: #1d2026;
			border-color: #222;
		}
	}

	pre {
		padding: 0;
	}

	.card-column {
		margin-top: 0;
		min-width: 100px;
		padding: 8px 24px 24px;
		flex-basis: 0px;
		flex-grow: 1;
		display: flex;
		flex-direction: column;

		border-right: 1px solid #e9ecef;

		:root[data-theme="dark"] & {
			border-color: var(--sl-border);
		}

		@media (prefers-color-scheme: dark) {
			:root[data-theme="auto"] & {
				border-color: var(--sl-border);
			}
		}
	}

	code {
		color: #666;

		:root[data-theme="dark"] & {
			color: rgb(171, 178, 191);
		}

		@media (prefers-color-scheme: dark) {
			:root[data-theme="auto"] & {
				color: rgb(171, 178, 191);
			}
		}
	}

	h4 {
		margin-bottom: 8px;
		font-weight: 500;
		font-size: 16px;
	}
}
