%typography {
	h2 {
		@extend %t-h2;
	}

	h3 {
		@extend %t-h3;
	}

	h4 {
		@extend %t-h4;
	}

	p {
		@extend %paragraph;

		a {
			color: $color-main;
			font-weight: $font-weight-medium;

			&:hover {
				@extend %link-underline;
			}

			&:focus-visible {
				color: $color-medium;
			}
		}
	}

	ul,
	ol {
		li {
			@extend %paragraph;
			position: relative;

			margin-bottom: $spacing-2;
			padding-left: calc($spacing-2 + 10px);

			@media (min-width: $breakpoint-md) {
				padding-left: calc($spacing-2-5 + 10px);
			}

			&::before {
				position: absolute;
				left: 0;
				display: inline-block;
				color: $color-grey-5;
			}

			> ol,
			ul {
				margin-top: $spacing-2;
			}
		}

		&:is(ul) > li {
			&::before {
				content: '-';
			}
		}

		&:is(ol) > li {
			counter-increment: custom-counter;

			&::before {
				content: counter(custom-counter) '.';
			}
		}
	}

	figure {
		display: flex;
		flex-direction: column;
		gap: $spacing-2;

		@media (min-width: $breakpoint-md) {
			margin-left: calc(100% / 12 - $grid-gutter-width);
			margin-right: calc(100% / 12 - $grid-gutter-width);
		}

		figcaption {
			@extend %t-body-xs;
			color: $color-grey-5;

			a {
				@extend %link-underline;
				color: $color-main;
			}
		}

		&.-portrait {
			@media (min-width: $breakpoint-md) {
				margin-left: calc(100% / 12 * 2 - $grid-gutter-width);
				margin-right: calc(100% / 12 * 2 - $grid-gutter-width);
			}
		}
	}

	figure img,
	> img {
		display: block;
		width: 100%;
		height: auto;

		border-radius: $border-radius-brand 0px;
	}

	.supt-video {
		video {
			border-radius: $border-radius-brand 0px;
		}
	}

	figure,
	> img,
	.supt-video {
		/* &:not(.-portrait) {
			@media (min-width: $breakpoint-md) {
				margin-inline: calc(100% / 12 * -1 - $grid-gutter-width);
			}
		} */
		&.-portrait {
			@media (min-width: $breakpoint-md) {
				max-width: 75%;
				margin-inline: auto;
			}
		}
	}

	blockquote {
		@extend: %t-body-sm;
		@mixin clamp gap, $spacing-8, $spacing-10, $breakpoint-xs, $breakpoint-xl;
		padding-inline: $spacing-6;
		color: $color-black;
		display: flex;
		flex-direction: column;

		&::before {
			content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDIwIiBmaWxsPSJub25lIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTQuODQ0NzIgMTkuNjAyNUMzLjUwMzExIDE5LjYwMjUgMi4zNjAyNSAxOS4xNTUzIDEuNDE2MTUgMTguMjYwOUMwLjQ3MjA1IDE3LjMxNjggMCAxNi4xOTg4IDAgMTQuOTA2OEMwIDE0LjMxMDYgMC4wNzQ1MzQxIDEzLjcxNDMgMC4yMjM2MDIgMTMuMTE4QzAuNDIyMzYgMTIuNDcyIDAuNzcwMTg2IDExLjYyNzMgMS4yNjcwOCAxMC41ODM5TDYuMjYwODcgMEgxMC43MzI5TDcuNzUxNTUgMTEuMTgwMUM5LjA0MzQ4IDEyLjE3MzkgOS42ODk0NCAxMy40MTYxIDkuNjg5NDQgMTQuOTA2OEM5LjY4OTQ0IDE2LjE5ODggOS4xOTI1NSAxNy4zMTY4IDguMTk4NzYgMTguMjYwOUM3LjI1NDY2IDE5LjE1NTMgNi4xMzY2NSAxOS42MDI1IDQuODQ0NzIgMTkuNjAyNVpNMTguMTExOCAxOS42MDI1QzE2Ljc3MDIgMTkuNjAyNSAxNS42MjczIDE5LjE1NTMgMTQuNjgzMiAxOC4yNjA5QzEzLjczOTEgMTcuMzE2OCAxMy4yNjcxIDE2LjE5ODggMTMuMjY3MSAxNC45MDY4QzEzLjI2NzEgMTQuMzEwNiAxMy4zNDE2IDEzLjcxNDMgMTMuNDkwNyAxMy4xMThDMTMuNjg5NCAxMi40NzIgMTQuMDM3MyAxMS42MjczIDE0LjUzNDIgMTAuNTgzOUwxOS41MjggMEgyNEwyMS4wMTg2IDExLjE4MDFDMjIuMzEwNiAxMi4xNzM5IDIyLjk1NjUgMTMuNDE2MSAyMi45NTY1IDE0LjkwNjhDMjIuOTU2NSAxNi4xOTg4IDIyLjQ1OTYgMTcuMzE2OCAyMS40NjU4IDE4LjI2MDlDMjAuNTIxNyAxOS4xNTUzIDE5LjQwMzcgMTkuNjAyNSAxOC4xMTE4IDE5LjYwMjVaIgogICAgICAgIGZpbGw9IiNFRDAwMkYiIC8+Cjwvc3ZnPg==');
			display: block;
			@mixin clamp width, 24, 32, $breakpoint-xs, $breakpoint-xl;
			height: auto;
			fill: $color-main;
		}

		> p {
			font-weight: $font-weight-medium;
		}

		footer {
			display: flex;
			flex-direction: column;

			img {
				width: 40px;
			}
		}
	}

	/* ====================
	 * SPACINGS
	 * ==================== */
	> * {
		@mixin clamp margin-top, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;

		&:first-child {
			margin-top: 0;
		}

		&:is(p, ul, ol, .supt-button) {
			+ p,
			+ ul,
			+ ol,
			+ .supt-button {
				@mixin clamp margin-top, $spacing-6, $spacing-8, $breakpoint-xs, $breakpoint-xl;
			}
		}

		&:is(h2, h3, h4, h5, h6) {
			+ * {
				@mixin clamp margin-top, $spacing-2, $spacing-4, $breakpoint-xs, $breakpoint-xl;
			}
		}
	}
}

.supt-typography {
	@extend %typography;
}