.contain-sub-1 {
	@include media-breakpoint-up(lg) {
		position: relative;
		isolation: isolate;
		&:hover {
			.nav-link {
				color: $primary;
			}
			.contain-sub-1__content {
				top: 100%;
				visibility: visible;
				opacity: 1;
				pointer-events: unset;
			}
		}
	}
	&--alter {
		.contain-sub-1__content {
			padding-inline: 0;
		}
		.contain-sub-1__link {
			border-radius: 0;
		}
	}
	&__content {
		padding: 0.75rem;
		display: none;
		border-radius: $border-radius-lg;
		background-color: var(--bs-body-bg);
		max-height: 250px;
		overflow-y: auto;
		scrollbar-color: transparent transparent;
		scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}
		@include media-breakpoint-up(md) {
			max-height: 350px;
		}
		@include media-breakpoint-up(lg) {
			width: 300px;
			max-height: none;
			overflow-y: unset;
			display: block;
			position: absolute;
			top: calc(100% + 1rem);
			left: 50%;
			transform: translateX(-50%);
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
			box-shadow: $box-shadow;
			transition: $transition-base;
		}
		&-sm {
			@include media-breakpoint-up(lg) {
				width: 200px;
			}
		}
		&-lg {
			@include media-breakpoint-up(lg) {
				width: 370px;
			}
		}
		&-xl {
			@include media-breakpoint-up(lg) {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;
				width: 600px;
				& > li {
					width: calc(50% - 0.25rem);
				}
			}
		}
		li {
			&:hover {
				& > .contain-sub-1__link {
					background-color: var(--bs-primary-bg-subtle);
				}
			}
		}
	}
	&__link {
		padding: 0.25rem 0.5rem;
		border-radius: $border-radius;
		transition: $transition-base;
		@include media-breakpoint-up(lg) {
			padding: 0.75rem;
			border-radius: $border-radius-lg;
		}
	}
	&__img {
		display: none;
		@include media-breakpoint-up(lg) {
			display: block;
			flex-shrink: 0;
		}
	}
	&__title {
		font-family: $font-family-monospace;
		font-size: $font-size-sm;
		color: var(--bs-body-color);
		@include media-breakpoint-up(lg) {
			font-weight: $font-weight-semibold;
		}
	}
	&__description {
		display: none;
		color: rgba(var(--bs-body-color-rgb), 0.65);
		font-size: $font-size-sm;
		@include media-breakpoint-up(lg) {
			display: block;
		}
	}
	.nav-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.25rem;
		position: relative;
		isolation: isolate;
		&::after {
			content: "\f107";
			display: inline-block;
			font-family: "Line Awesome Free";
			font-weight: 900;
			font-size: $font-size-xs;
			line-height: 1;
			font-variant: normal;
			text-rendering: auto;
			color: inherit;
		}
	}
}