.supt-footer {
	background-color: $color-grey-background;

	padding-top: $spacing-12;

	@media (min-width: $breakpoint-md) {
		padding-top: $spacing-16;
	}

	.supt-footer__links {
		display: flex;
	}

	&__col-title {
		@extend %t-body-s;
		font-weight: $font-weight-medium;
	}

	&__link {
		@extend %t-body-s, %link-underline-reversed;
		outline: none;
	}

	.supt-footer__main {
		border-top: 1px solid $color-grey-2;
		border-bottom: 1px solid $color-grey-2;
		padding-block: $spacing-12;

		@media (min-width: $breakpoint-md) {
			padding-block: $spacing-16 $spacing-28;
		}

		.supt-footer__row {
			row-gap: $spacing-10;
		}

		.supt-footer__col {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			row-gap: $spacing-4;

			&-title {
				font-weight: $font-weight-medium;
			}
		}

		.supt-footer__links {
			flex-direction: column;
			align-items: flex-start;
			row-gap: $spacing-2;

			@media (min-width: $breakpoint-md) {
				row-gap: $spacing-1;
			}

			.supt-footer__link {
				color: $color-grey-5;
			}
		}
	}

	.supt-footer__bottom {
		@extend %t-body-xs;
		color: $color-grey-5;
		padding-block: $spacing-4;

		@media (min-width: $breakpoint-md) {
			padding-block: $spacing-6;
		}

		.supt-footer__row {
			justify-content: space-between !important;
			row-gap: $spacing-4;
		}

		.supt-footer__copyright {
			span {
				margin-inline: $spacing-2;

				@media (min-width: $breakpoint-md) {
					margin-inline: $spacing-2;
				}
			}

			a {
				@extend %link-underline;
				outline: none;
			}
		}

		.supt-footer__links {
			display: flex;
			gap: $spacing-2-5;

			.supt-footer__link {
				display: inline-flex;
				color: inherit;
			}
		}

		.supt-footer__link {
			@extend %t-body-xs;
		}
	}
}