.tabs{
	position: relative;
	@extend .coyote-block-wrapper;
	overflow: hidden;
	
	.image-bottom{
		@media screen and (min-width: 991px){
			position: absolute;
			bottom: 0;
			right: 0;
			height: 100%;
			width: 50vw;
			object-fit: cover;
			object-position: center;
			border-radius: 0;
			opacity: .92;
		}
	}
	.tab-style-1{
		@media screen and (min-width: 991px){
			min-height: 440px;
		}
		.tab-content{
			padding-top: 1.5rem;
			.tab-pane{
				padding: 1.5rem 1.75rem;
				background: color-mix(in srgb, var(--background) 88%, white);
				border: 1px solid var(--coyote-border-color);
				border-radius: calc(var(--coyote-border-radius) * 1.2);
				box-shadow: var(--coyote-shadow-soft);
			}
		}
		ul{
			position: relative;
			z-index: 3;
			display: flex;
			flex-wrap: nowrap;
			column-gap: .75rem;
			row-gap: .75rem;
			overflow-x: auto;
			scrollbar-width: none;
			padding-bottom: .25rem;
			&::-webkit-scrollbar{
				display: none;
			}
			&:before{
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0;
				width: 100%;
				height: 1px;
				background: var(--counter-color);
				opacity: .1;
				z-index: -1;
			}
			button{
				background: transparent !important;
				padding: .9rem 1.25rem;
				margin-right: 0;
				font-size: ($cy-font-size * 1.2);
				font-weight: 600;
				border: 1px solid transparent;
				margin-bottom: 0;
				border-radius: 999px;
				white-space: nowrap;
				&:not(.active){
					color: color-mix(in srgb, var(--counter-color) 70%, transparent);
					background: color-mix(in srgb, var(--background) 92%, transparent) !important;
				}
				&.active{
					color: var(--counter-color);
					border-color: color-mix(in srgb, var(--coyote-primary) 24%, var(--coyote-border-color));
					background: color-mix(in srgb, var(--coyote-primary) 10%, var(--background)) !important;
					box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
				}
			}
		}
		@media screen and (max-width: 991px){
			.tab-content .tab-pane{
				padding: 1.25rem;
			}
		}
	}
}
