/* variables */

:root {
	/* --card-color: #f7f7f8; */
	--card-title-color: #262626;
	--card-body-color: #444;
	--card-solid-background: #f7f7f7;
}

body[data-color-scheme="dark"] {
	/* --card-color: #191919; */
	--card-title-color: #e0e0e0;
	--card-body-color: #a4a4a5;
	--card-solid-background: #111;
}

.devices-container {
	display: flex;
	flex-direction: column;
}

.device-section {
	display: flex;
	margin-bottom: 1em;
	align-items: flex-start;
	/* background version */
	/* align-items: center; */
	/* background: var(--card-color); */
	/* padding: 20px;
	border-radius: 18px; */
	padding: 20px 40px;
	border-radius: 18px;
	/* border: 1px solid var(--main-border-color); */
	background-color: var(--card-solid-background);
}

.device-info {
	flex-basis: 25%;
	margin-top: 1em;
}

.device-grid {
	flex: 1;
	display: grid;
	/* grid-template-columns: repeat(2, minmax(300px, 1fr)); */
	grid-template-columns: repeat(2, 1fr);
	gap: 7px;
	height: fit-content;
}

@media only screen and (max-width: 1500px) {
	.device-grid {
		grid-template-columns: 1fr;
	}

	.device-info {
		flex-basis: 35%;
	}
}

@media only screen and (max-width: 735px) {
	.device-section {
		flex-direction: column;
		align-items: flex-start;
	}

	.device-grid {
		grid-template-columns: 1fr;
	}

	.device-info {
		flex-basis: 100%;
		margin-top: 1em;
	}
}

.device-grid-content {
	padding: 1em;
}

@media only screen and (max-width: 735px) {
	.device-grid-content {
		padding: 1em 0;
	}
}

.device-icon {
	height: 70px;
	margin-bottom: 7px;
}

.device-icon-small {
	height: 60px;
}

.device-icon-smaller {
	height: 50px;
}

.device-icon-smallest {
	height: 40px;
}

body[data-color-scheme="dark"] .device-icon {
	filter: invert(1);
}

.article-content-wrapper .devices-container .device-title {
	font-size: 24px;
	/* font-size: 28px; */
	line-height: 1.14286;
	font-weight: 600;
	letter-spacing: 0.007em;
	margin-bottom: 0.3em;
	padding-right: 10px;
}

.article-content-wrapper .devices-container .device-name {
	margin-top: 0;
	padding-top: 0;
	font-size: 14px;
}

.device-card {
	border-radius: 18px;
}

.device-card p {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
	color: var(--card-body-color);
}

.device-card p.device-card-title {
	margin-bottom: 0.3em;
	color: var(--card-title-color);
}

.device-card .device-card-subtitle {
	font-size: 14px;
	font-weight: 600;
}

.device-card p.device-card-subbody {
	font-size: 14px;
	line-height: 1.3;
}

.device-card p.device-card-subbody + p.device-card-body,
.device-card .device-small-space {
	margin-top: 1em;
}

/* table */
table.table-3-col.column-border p {
	font-size: 16px;
}

table.table-3-col.column-border p:not(.TableHead) {
	color: var(--card-title-color);
}

/* overrides */
.bg-gradient {
	background: unset !important;
}