@import '../main.css'; /* MANDATORY */
@import '../elements/card.css';

main {
    max-width: 991px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

main > h1 { 
    margin-top: 25px;
    margin-bottom: 25px;
}

main > div:first-of-type {
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	gap: 28px;
	margin-top: 24px;
	margin-bottom: 24px;
}

main > div:first-of-type > .card { 
	margin: 0;
	flex-direction: column;
	padding: 8px;
}

main > div:first-of-type > .card > p { margin-bottom: 12px; }
main > div:first-of-type > .card > p:first-of-type > svg { vertical-align: top; }
main > div:first-of-type > .card > p:first-of-type > span { 
	margin-left: 4px;
	font-weight: bolder;
	font-size: larger;
}

main > ul { max-width: fit-content; }
main > ul > li,
main > ul > li > span:last-of-type {
	display: flex;
	justify-content: space-between;
}

main > ul > li > span:last-of-type { 
	width: 75px; 
	margin-left: 12px;
}

main > ul > li > span:last-of-type > span { 
	text-align: center;
    width: 25px;
}

main > div:first-of-type > .card > p:first-of-type { color: var(--str8lines-primary); }
main > div:first-of-type > .card > p:first-of-type > svg:hover path { fill: var(--str8lines-primary); }
.dark main > div:first-of-type > .card > p:first-of-type { color: var(--str8lines-primary-light); }
main > div:first-of-type > .card > p:first-of-type > svg:hover path { fill: var(--str8lines-primary-light); }
.dark main > div:first-of-type > .card > p:first-of-type > span { color: var(--str8lines-primary-white); }

@media (max-width: 576px) {
	main > div:first-of-type { grid-template-columns:repeat(1, 1fr); }
}