section {
	color: $color;
	background-color: $color-bg;
	&.active {
		color: $color-active;
		background-color: $color-bg-active;
	}
	padding-left: $section-gap-x;
	padding-right: $section-gap-x;
	~ section {
		margin: $section-gap-y auto;
	}
}

hr {
	height: 1px;
	margin: $g2 0;
	border-width: 1px;
}
//standard sematic gap
.section-welcome {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: $section-gap-y $section-gap-x;
	// .bg {
	// 	content: '';
	// 	pointer-events: none;
	// 	position: absolute;
	// 	top: 0;
	// 	bottom: 0;
	// 	right: 0;
	// 	left: 0;
	// 	z-index: 1;
	// 	background-color: $color-bg;
	// 	opacity: 0.9;
	// }
	> div {
		@include fixed();
		overflow: hidden;
		border-radius: $radius-3;
		position: relative;
		z-index: 2;
		border: $radius-3;
		color: $color-bg;
		background-color: $color;
		padding: $g3;
	}
	&.active {
		> div {
			color: $color;
			background-color: $color-bg;
		}
	}
}
.section-hero {
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
	height: 40vh;
	min-height: 300px;
	margin-top: 0;
	margin-bottom: 0;
	background-color: var(--color-bg);
	color: var(--color);
	> figure,
	> picture {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		img {
			display: aboslute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			max-width: 100vw;
		}
		&.mask {
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: $color-0;
				opacity: 0.4;
			}
		}
	}
	> div {
		height: 100%;
		width: 100%;
		position: relative;
		z-index: 2;
		display: flex;
		padding: $panel-gap-y $panel-gap-x;
		gap: $panel-gap-y $panel-gap-x;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		max-width: $screen-xs-max;
		flex-direction: column;
	}
}

.section-info {
	display: flex;
	flex-direction: column;
	gap: $g1;
	line-height: normal;
	margin-top: 0;
	margin-bottom: 0;
	> div {
		> span {
			margin-right: $g1;
		}
	}
	span,
	b,
	a {
		&:empty {
			display: none !important;
		}
	}
}

.panel-attr,
.panel-info,
.panel-record {
	gap: $g1;
	&.tiny {
		gap: $g0;
		font-size: $font-size-7;
	}
	&.large {
		gap: $g2;
	}
}

.panel-card {
	--panel-card-x: #{$g1};
	--panel-card-y: #{$g1};
	--panel-img-size: 5.625rem;
	--panel-card-img-height: 40%;
	--panel-card-height: auto;
	--panel-card-width: auto;
	@include box-line();
	position: relative;
	border-radius: $radius-1;
	overflow: hidden;
	display: flex;
	padding: var(--panel-card-y) var(--panel-card-x);
	gap: var(--panel-card-y) var(--panel-card-x);
	height: var(--panel-card-height);
	width: var(--panel-card-width);
	> .profile {
		flex-shrink: 0;
		width: fit-content;
		min-width: var(--panel-img-size);
		min-height: var(--panel-img-size);
		position: relative;
		> img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: $radius-1;
			&.bg {
				top: calc(var(--panel-card-y) * -1);
				right: calc(var(--panel-card-x) * -1);
				left: calc(var(--panel-card-x) * -1);
				width: calc(100% + var(--panel-card-x) * 1);
				height: calc(100% + var(--panel-card-y) * 2);
				border-radius: $radius-1 0 0 $radius-1;
			}
		}
		> div {
			z-index: 2;
		}
	}
	> .content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.top-right {
		position: absolute;
		right: $g1;
		top: $g1;
	}

	&.vertical {
		flex-direction: column;
		justify-content: space-between;
		> .profile {
			width: 100%;
			min-width: initial;
			padding-top: var(--panel-card-img-height);
			> img {
				&.bg {
					width: calc(100% + var(--panel-card-x) * 2);
					height: calc(100% + var(--panel-card-y) * 1);
					border-radius: $radius-1 $radius-1 0 0;
				}
			}
		}
	}
	&.tiny {
		--panel-card-x: #{$g2};
		--panel-card-y: #{$g2};
		--panel-img-size: 4rem;
		&.vertical {
			--panel-card-y: #{$g2};
			--panel-card-x: #{$g2};
		}
	}
	&.large {
		--panel-card-x: #{$g3};
		--panel-card-y: #{$g2};
		--panel-img-size: 7.5rem;
		&.vertical {
			--panel-card-y: #{$g3};
			--panel-card-x: #{$g2};
		}
	}
}

.panel-attr {
	@include multiline($lineCount: 2, $breakAll: true);
	line-height: 1.25;
	> span {
		margin-right: $g2;
		&:last-of-type {
			margin-right: 0;
		}
		margin-bottom: $gxs;
	}
	.attr {
		background-color: $color-l1;
		border-radius: $radius-1;
		padding: 2px $g1;
		font-size: $font-size-6;
	}
}

.panel-list-link {
	li {
		position: relative;
	}
	a {
		display: flex;
		justify-content: space-between;
		> span {
			@include singleline();
		}
		&[data-count] {
			&:after {
				content: attr(data-count);
				color: $color;
				pointer-events: none;
				display: block;
				flex-shrink: 0;
			}
		}
	}
}

.panel-info {
	display: flex;
	flex-direction: column;
	width: 100%;
	line-height: 1.25;
}
.panel-img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	&.bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
}

.panel-record {
	width: 100%;
	--record-xs: 100%;
	--record-sm: 50% 50%;
	--record-md: 50% 50%;
	> ul {
		margin: $g1 auto;
		&:not(:first-of-type) {
			margin-top: $g3;
		}
		display: grid;
		grid-template-columns: 100%;
		width: 100%;
		@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
			grid-template-columns: var(--record-sm);
		}
		@media screen and (min-width: $screen-sm-min) {
			grid-template-columns: var(--record-md);
		}
		li {
			width: 100%;
			border-bottom: 1px solid $color-l1;
			display: flex;
			margin-bottom: $g1;
			padding-bottom: $g1;
			line-height: normal;
			&:last-of-type {
				margin-bottom: 0;
			}
			.key {
				width: 50%;
				flex-shrink: 0;
			}
			.value {
				display: flex;
				align-items: baseline;
				font-weight: $font-weight-bold;
				word-break: break-word;
				flex-wrap: wrap;
				&.max {
					@include multiline($lineCount: 3);
				}
				a {
					&:first-of-type {
						margin-right: $gxs;
					}
					&:last-of-type {
						margin-right: 0;
					}
				}
			}
			&.apply {
				background-color: $color-bg;
				margin-top: -2px;
				justify-content: flex-end;
			}
		}
	}
	.btn {
		display: inline-block;
	}
}

.panel-pagination {
	display: flex;
	flex-direction: column;
	.pagination-list {
		display: flex;
		flex-flow: wrap;
		align-items: center;
		justify-content: center;
		a,
		span {
			display: block;
			height: $comp-size-2;
			line-height: $comp-size-2;
			width: $comp-size-2;
			text-align: center;
			margin: 1px;
		}
		a {
			color: $color-link-default;
			border-radius: $radius-3;
			@include hover() {
				color: $color-minor;
			}
			&[disabled] {
				background-color: $color-l1;
				color: $color;
			}

			&.next,
			&.prev {
				@include icon();
				background-color: $color-link-default;
				color: $color-f;
				&[disabled] {
					background-color: $color-l1;
					color: $color;
				}
			}
			&.prev:before {
				line-height: $comp-size-2;
				content: $icon-angle-left;
			}

			&.next:before {
				line-height: $comp-size-2;
				content: $icon-angle-right;
			}
			&.selected {
				background-color: $color-link-default;
				color: $color-f;
			}
		}
	}
}

.panel-overview {
	--market-overview-xs: repeat(2, minmax(0, 1fr));
	--market-overview-sm: repeat(4, minmax(0, 1fr));
	--market-overview-md: repeat(4, minmax(0, 1fr));
	--market-overview-lg: repeat(4, minmax(0, 1fr));

	display: grid;
	grid-column-gap: $g1;
	grid-row-gap: $g1;
	@media screen and (max-width: $screen-xs-max) {
		grid-template-columns: var(--market-overview-xs);
	}
	@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
		grid-template-columns: var(--market-overview-sm);
	}
	@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
		grid-template-columns: var(--market-overview-md);
	}
	@media screen and (min-width: $screen-lg-min) {
		grid-template-columns: var(--market-overview-lg);
	}
	.count {
		display: block;
		padding: $g2;
		color: $color-f;
		background-color: #49d9e2;
		border-radius: 2px;
		text-shadow: $color;
		&:hover {
			background-color: #36c4cc;
		}
		.num {
			font-size: $font-size-2;
			line-height: $font-size-2;
			margin-bottom: $g0;
		}
		.unit {
			font-size: $font-size-5;
			color: $color-f;
			@include singleline();
		}
	}
}

.panel-fixed {
	position: fixed;
	z-index: $ui-stick-index;
	&.bottom-right {
		bottom: $g2;
		right: $g2;
	}
}