// links
.link {
	&-underline {
		text-decoration: underline;
		@include hover() { text-decoration: none; }
	}

	&-inverse {
		color: $text-color;
		@include hover() { color: $co-alpha; }
	}

	&-skip {
		position: fixed;
		z-index: $z-index-header + 1;
		top: 100rem;
		left: 100rem;
		padding: $sp-2 $sp-3;
		color: $text-color;
		text-decoration: none;
		background-color: $co-gray-80;
		@if $useBorderRadius {
			border-bottom-right-radius: $sp-4;
		}
		&:hover {
			background-color: lighten($co-gray-80, 5%);
		}
		&:focus-visible {
			top: 0;
			left: 0;
			box-shadow: none;
		}
	}

	@each $suf, $color in ('base-1': $co-base-1, 'text': $text-color) {
		&-#{$suf} {
			color: $color;
			@include hover() {
				color: $color;
				opacity: .7;
			}
		}
	}
}

// text
.h-fluid {
	font-size: clamp(#{$font-size-h1},  4vw, #{$font-size-h1 + 1});
	margin-bottom: clamp($sp-5, 4vw, $sp-6);
}

.p-fluid {
	font-size: clamp($font-size-base,  2vw, $font-size-h4);
}

.text-columns {
	columns: 25rem 3;
	// column-rule: 1px solid $co-gray-70;
	column-gap: $sp-6;
	> :last-child { margin-bottom: 0 !important;}
}

// icons
.ico {
	display: inline-block;

	@at-root svg#{&} {
		width: 1em;
		height: 1em;
		fill: currentColor;
		// vertical-align: -0.075em;
		// vertical-align: baseline;
		vertical-align: middle;
		position: relative;
		top: -0.05em;
	}
}

// list
.list-unstyled {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-ico {
	list-style: none;
	padding: 0;

	> li {
		position: relative;
		padding-left: $sp-5 + .4;

		> .ico {
			position: absolute;
			top: 0;
			left: 0;
			&[class*="fa-"] { top: 0.2em;}
		}
		> svg.ico {
			top: .3em;
		}
	}
}

// media responsive
.ratio {
	position: relative;
	width: 100%;

	> img,
	> video,
	> iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&-4x3  { padding-top: 75%;}
	&-16x9 { padding-top: 56.25%;}
	// &-21x9 { padding-top: 42.8571428571%;}
}