@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin-block-end: 0;
	}

	dd {
		margin-inline: 0;
	}

	body {
		margin: 0;
		padding: 0;
	}

	ul[role="list"],
	ol[role="list"] {
		list-style: none;
	}

	body {
		line-height: 1.5;
	}

	h1,
	h2,
	h3,
	h4,
	button,
	input,
	label {
		line-height: 1.1;
	}

	button {
		cursor: pointer;
	}

	h1,
	h2,
	h3,
	h4 {
		text-wrap: balance;
	}

	a:not([class]) {
		text-decoration-skip-ink: auto;
		color: currentColor;
	}

	img,
	picture {
		max-width: 100%;
		display: block;
	}

	figure {
		margin: 0;
		padding: 0;
	}

	dialog {
		padding: 0;
	}

	input,
	button,
	textarea,
	select {
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		letter-spacing: inherit;
	}

	textarea:not([rows]) {
		min-height: 10em;
	}

	:target {
		scroll-margin-block: 5ex;
	}
}

@layer base {
	:root {
		--serif-font: "EB Garamond", serif;
		--san-serif-font: "Inter", sans-serif;
		--handwriting-font: "Gochi Hand", cursive;

		--step--1: 0.875rem;
		--step-0: 1rem;
		--step-1: 1.25rem;
		--step-2: 1.5rem;

		--ls: -0.06em;

		--fw-regular: 400;
		--fw-semi-bold: 600;
		--fw-bold: 700;

		--spacing-none: 0;
		--spacing-d: 4px;
		--spacing-ds: 6px;
		--spacing-s: 8px;
		--spacing-m: 12px;
		--spacing-l: 16px;
		--spacing-dl: 20px;
		--spacing-xl: 24px;
		--spacing-xxl: 30px;
		--spacing-xxxl: 36px;
		--spacing-xvl: 48px;

		--white: #fff;
		--black: #000;
		--bluegrey: #fafcfd;
		--cardtonic-main-light: rgba(230, 233, 236, 1);
		--cardtonic-main-light-hover: rgba(217, 222, 227, 1);
		--cardtonic-main-light-active: rgba(176, 187, 197, 1);
		--cardtonic-main-normal: rgba(0, 36, 68, 1);
		--cardtonic-main-normal-hover: rgba(0, 32, 61, 1);
		--cardtonic-main-normal-active: rgba(0, 29, 54, 1);
		--cardtonic-main-dark: rgba(0, 27, 51, 1);
		--cardtonic-main-dark-hover: rgba(0, 22, 41, 1);
		--cardtonic-main-dark-active: rgba(0, 16, 31, 1);
		--cardtonic-main-darker: rgba(0, 13, 24, 1);
		--cardtonic-accent-purple-light: rgba(238, 230, 253, 1);
		--cardtonic-accent-purple-light-hover: rgba(229, 217, 253, 1);
		--cardtonic-accent-purple-light-active: rgba(201, 176, 250, 1);
		--cardtonic-accent-purple-normal: rgba(80, 0, 239, 1);
		--cardtonic-accent-purple-normal-hover: rgba(72, 0, 215, 1);
		--cardtonic-accent-purple-normal-active: rgba(64, 0, 191, 1);
		--cardtonic-accent-purple-dark: rgba(60, 0, 179, 1);
		--cardtonic-accent-purple-dark-hover: rgba(48, 0, 143, 1);
		--cardtonic-accent-purple-dark-active: rgba(36, 0, 108, 1);
		--cardtonic-accent-purple-darker: rgba(28, 0, 84, 1);
		--cardtonic-grey-light: rgba(241, 241, 241, 1);
		--cardtonic-grey-light-hover: rgba(234, 234, 234, 1);
		--cardtonic-grey-light-active: rgba(211, 211, 211, 1);
		--cardtonic-grey-normal: rgba(112, 112, 112, 1);
		--cardtonic-grey-normal-hover: rgba(101, 101, 101, 1);
		--cardtonic-grey-normal-active: rgba(90, 90, 90, 1);
		--cardtonic-grey-dark: rgba(84, 84, 84, 1);
		--cardtonic-grey-dark-hover: rgba(67, 67, 67, 1);
		--cardtonic-grey-dark-active: rgba(50, 50, 50, 1);
		--cardtonic-grey-darker: rgba(39, 39, 39, 1);
	}

	body {
		font-family: var(--san-serif-font);
		color: var(--cardtonic-grey-normal);
		letter-spacing: var(--ls);
		padding: var(--spacing-xxxl) var(--spacing-xl);
	}

	h1,
	.h1 {
		font-size: var(--step-2);
		color: var(--cardtonic-main-normal);
		line-height: 1.4;
		margin: 0;
	}

	p {
		margin-block: var(--spacing-l);
		font-weight: var(--fw-semi-bold);
	}

	.container {
		display: flex;
		gap: var(--spacing-xvl);
	}

	.hero {
		flex: 0 1 auto;
		position: sticky;
		top: var(--spacing-xxxl);
		align-self: flex-start;
	}

	.main {
		flex: 3 1 0;
	}

	.capped {
		max-width: 333px;
	}

	.bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.grid-flow {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(328px, 100%), 1fr));
	}

	.group {
		display: flex;
		gap: var(--spacing-d);
		align-items: center;
	}
}

@layer styling {
	.btn {
		padding: var(--spacing-ds) var(--spacing-m);
		background: var(--cardtonic-main-normal);
		color: var(--cardtonic-main-light);
		border: none;
		border-radius: var(--spacing-dl);
		font-size: var(--step--1);
		line-height: 16px;
		font-weight: var(--fw-semi-bold);
		text-decoration: none;
		text-wrap: nowrap;
	}

	.text {
		font-weight: var(--fw-semi-bold);
	}

	.long {
		width: 100%;
	}

	.icon {
		display: grid;
		place-content: center;
		background: var(--cardtonic-main-normal);
		width: 28px;
		height: 28px;
		border-radius: 50%;
	}

	.hero {
		max-width: 320px;

		h1 {
			max-width: 236px;
		}

		p {
			margin-block: var(--spacing-xl);
		}
	}

	.writing {
		font-family: var(--handwriting-font);
		color: var(--cardtonic-accent-purple-normal);
		vertical-align: top;
		margin-inline-start: 4px;
		font-weight: var(--fw-regular);
	}

	.button-wrapper {
		display: flex;
		gap: var(--spacing-ds);
		width: fit-content;

		& > * {
			flex-shrink: 0;
		}

		.icon {
			display: none;
			opacity: 0;
			transform: translateX(-100%);
			transition: transform 0.4s ease, opacity 0.4s ease;
			transition-behavior: allow-discrete;
		}

		&:hover {
			.icon {
				display: grid;
				transform: none;
				opacity: 1;

				@starting-style {
					opacity: 0;
					transform: translateX(-100%);
				}
			}
		}
	}

	.media-content {
		--color: var(--cardtonic-main-light-hover);
		--stroke: 4px solid var(--color);
		--offset: -8px;
		--dimensions: 40px;

		position: relative;

		&[data-type="small"] {
			--dimensions: 24px;
		}

		&:hover {
			--color: var(--cardtonic-accent-purple-normal);
		}

		img {
			border: 1px solid var(--color);
		}

		&::before,
		&::after,
		.anchor::before,
		.anchor::after {
			content: "";
			width: var(--dimensions);
			height: var(--dimensions);
			background: none;
			position: absolute;
		}

		&::before {
			border-top: var(--stroke);
			border-left: var(--stroke);
			top: var(--offset);
			left: var(--offset);
		}

		&::after {
			border-top: var(--stroke);
			border-right: var(--stroke);
			top: var(--offset);
			right: var(--offset);
		}

		.anchor {
			width: 100%;

			&::before {
				border-bottom: var(--stroke);
				border-left: var(--stroke);
				bottom: var(--offset);
				left: var(--offset);
			}

			&::after {
				border-bottom: var(--stroke);
				border-right: var(--stroke);
				bottom: var(--offset);
				right: var(--offset);
			}
		}
	}

	.heading {
		margin-block: var(--spacing-xl) 64px;
		gap: var(--spacing-s);
		flex-wrap: wrap;
		align-items: start;

		p {
			margin: 0;
		}
	}

	.certification {
		gap: var(--spacing-xvl);
		margin-block: var(--spacing-xvl);
	}

	.interactive {
		display: grid;
		place-content: center;
		background: var(--bluegrey);
		border: 1px solid var(--cardtonic-main-light-hover);
		padding-block: var(--spacing-xl);
		padding-inline: var(--spacing-l);
		margin-block-start: var(--spacing-l);
		min-height: 579px;
		position: relative;
		color: inherit;

		img {
			max-width: 576px;
			width: 100%;
			transform: none;
			transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
		}

		.info {
			position: absolute;
			top: var(--spacing-m);
			left: var(--spacing-m);
		}

		&:hover {
			img {
				transform: scale(1.1);
				filter: drop-shadow(10px 19px 21.4px rgba(219, 211, 211, 0.25));
			}
		}
	}

	.letter {
		font-family: var(--serif-font);

		p {
			max-width: 648px;
			font-size: var(--step-2);
			line-height: 1.5;
			font-weight: var(--fw-regular);
			letter-spacing: 0;
			color: var(--black);
			margin: 0;
		}

		p + p {
			margin-block-start: var(--spacing-xvl);
		}

		.long.writing {
			margin: 0;
			text-align: end;
			color: var(--cardtonic-accent-purple-normal);
			transform: rotate(-3.12deg);

			&.start {
				margin-block-start: var(--spacing-xxxl);
				transform: rotate(-2.44deg);
			}
		}
	}

	.link {
		color: var(--cardtonic-accent-purple-normal);

		&:visited {
			color: var(--cardtonic-grey-dark);
		}
	}
}

@layer medias {
	@media (width <= 820px) {
		.container {
			flex-direction: column;
		}

		.hero {
			position: static;
		}
	}
}