/* color */
.clr-text-dimmed {
	color: var(--clr-text-500);
}
.clr-text {
	color: var(--clr-text-900);
}
.clr-text-i {
	color: var(--clr-text-700);
}
.clr-background {
	color: var(--clr-background-50);
}
.clr-primary {
	color: var(--clr-primary-500);
}
.clr-secondary {
	color: var(--clr-secondary-200);
}
.clr-accent {
	color: var(--clr-accent-700);
}
.clr-bg__white-0 {
	background-color: var(--clr-background-0);
}
.clr-bg__white-50 {
	background-color: var(--clr-background-50);
}
.clr-bg__white-100 {
	background-color: var(--clr-background-100);
}
.clr-bg__primary {
	background-color: var(--clr-primary-600);
}
.clr-bg__gradient {
	background-image: linear-gradient(
		159deg,
		rgba(237, 29, 42) 0%,
		rgba(151, 18, 27, 1) 36%,
		rgba(68, 8, 12, 1) 69%
	);
}
.clr-gradient {
	background-image: linear-gradient(
		159deg,
		rgba(237, 29, 42, 1) 0%,
		rgba(151, 18, 27, 1) 53%,
		rgba(68, 8, 12, 1) 80%
	);
	background-clip: text;
	color: transparent;
}

/* font size */
.fs-heading {
	font-size: var(--fs-heading);
}
.fs-subheading {
	font-size: var(--fs-subheading);
}
.fs-title {
	font-size: var(--fs-title);
}
.fs-quote {
	font-size: var(--fs-quote);
}
.fs-body {
	font-size: var(--fs-body);
}
.fs-small {
	font-size: var(--fs-small);
}

/* font weight */
.fw-light {
	font-weight: var(--fw-light);
}
.fw-normal {
	font-weight: var(--fw-normal);
}
.fw-medium {
	font-weight: var(--fw-medium);
}
.fw-semibold {
	font-weight: var(--fw-semibold);
}
.fw-bold {
	font-weight: var(--fw-bold);
}

/* line height */
.lh-heading {
	line-height: var(--lh-heading);
}
.lh-subheading {
	line-height: var(--lh-subheading);
}
.lh-title {
	line-height: var(--lh-title);
}
.lh-quote {
	line-height: var(--lh-quote);
}
.lh-body {
	line-height: var(--lh-body);
}

/* font style */
/* p:not([class]) {
	opacity: 0.7;
	color: var(--clr-text-500);
	max-width: 32ch;
} */

p {
	font-size: var(--fs-body, 1rem);
}
p[data-type="wide"] {
	max-width: 42ch;
}
p[data-type="wide-xl"] {
	max-width: 70ch;
}
p[data-type="wide-xxl"] {
	max-width: 98ch;
}
p[data-type="wide-xxxl"] {
	max-width: 126ch;
}
.dimmed {
	color: var(--clr-text-500);
}
.description {
	display: grid;
	gap: 2.5rem;
}
.heading {
	display: grid;
	gap: 0.5rem;
}
.highlight {
	color: var(--clr-text-800);
	font-weight: var(--fw-medium);
}
.main-title {
	display: grid;
	gap: 1rem;
}
.main-title__top {
	display: grid;
	gap: 0.5rem;
}

/* padding block */
.pb-8 {
	padding-block: var(--spacing-100);
}
.pb-16 {
	padding-block: var(--spacing-200);
}
.pb-24 {
	padding-block: var(--spacing-300);
}
.pb-32 {
	padding-block: var(--spacing-400);
}
.pb-40 {
	padding-block: var(--spacing-500);
}
.pb-48 {
	padding-block: var(--spacing-600);
}
.pb-56 {
	padding-block: var(--spacing-700);
}
.pb-64 {
	padding-block: var(--spacing-800);
}
.pb-80 {
	padding-block: var(--spacing-900);
}
.pb-120 {
	padding-block: var(--spacing-950);
}

.mbs-24 {
	margin-block-start: var(--spacing-300);
}
.mbs-64 {
	margin-block-start: var(--spacing-800);
}
.mbs-120 {
	margin-block-start: var(--spacing-950);
}

main > section:first-child:not(.hero) {
	padding-block-start: 9rem;
	padding-block-end: var(--spacing-900);
}

/* button */
.button {
	cursor: pointer;
	text-decoration: none;
	border: 0;
	/* border-radius: 100vmax; */
	border-radius: 1rem;
	padding: 1em 2em;
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--clr-background-100);
	background-color: var(--clr-accent-700);
	box-shadow: 0 0.7em 1em -1em var(--clr-accent-800);
	transition: all 0.3s ease;
}

.button:hover {
	padding: 1em 2.5em;
}

.button i {
	transition: all 0.3s ease;
}

.button:hover i {
	margin-inline-start: 1em;
	transform: scale(1.2);
}

.button[data-type="inverted"] {
	color: var(--clr-accent-700);
	/* background-color: var(--clr-background-100); */
	background-color: transparent;
	box-sizing: border-box;
	border: 1px solid var(--clr-accent-700);
}

.button[data-type="inverted"]:hover {
	color: var(--clr-background-100);
	background-color: var(--clr-accent-700);
}

/* title spacing */
:where(.flow > :not(:first-child)) {
	margin-top: var(--flow-spacer, 3em);
}

/* grid */
.even-columns {
	display: grid;
	gap: 4rem;
}

@media (min-width: 768px) {
	.even-columns {
		grid-auto-flow: row;
		grid-auto-columns: 1fr;
	}
}

/* text-align */
.text-center {
	text-align: center;
	margin-inline: auto;
}
.justify {
	text-align: justify;
	margin-inline: auto;
}

/* breadcrumbs */
.breadcrumbs {
	margin-top: 5rem;
}
.breadcrumbs-list {
	list-style: none;
	padding-top: 0.5rem;
}
.breadcrumbs-list li {
	display: inline;
	line-height: var(--lh-400);
	color: var(--clr-text-500);
}
.breadcrumbs-list li:after {
	content: " /  ";
	padding-inline: 0.5rem;
}
.breadcrumbs-list li:last-child::after {
	content: "";
}
.breadcrumbs-list li a:hover {
	text-decoration: underline;
	color: var(--clr-primary-500);
}
.breadcrumbs-list .now {
	font-weight: var(--fw-medium);
	color: var(--clr-accent-700);
}

/* other */
.seperate-line {
	width: 100%;
	height: 1px;
	background-color: var(--clr-text-200);
}
/* .box-shadow {
	box-shadow: rgba(0, 0, 0, 0.1) 2.4px 2.4px 3.2px;
} */

.box-shadow {
	box-shadow: rgba(0, 0, 0, 0.1) 2.4px 2.4px 3.2px,
		rgba(241, 240, 240, 0.5) -2.4px -2.4px 3.2px;
}

.none {
	display: none;
}

.card {
	padding: 1rem;
	border-radius: 2rem;
	background-color: var(--clr-background-50);
}