.wp-block-tabs {
	display: flex;
	flex-direction: column;
	gap: var(--bl);
	overflow: hidden;
	@media (min-width: 992px) {
		flex-direction: row;

		&.tab-count--2 .wp-block-tab { width: 50%; }
		&.tab-count--2 .wp-block-tab.active .wp-block-tab__content { width: calc(200% + var(--bl)); }

		&.tab-count--3 .wp-block-tab { width: 33.33%; }
		&.tab-count--3 .wp-block-tab.active .wp-block-tab__content { width: calc(300% + var(--bl) * 2); }

		&.tab-count--4 .wp-block-tab { width: 25%; }
		&.tab-count--4 .wp-block-tab.active .wp-block-tab__content { width: calc(400% + var(--bl) * 3); }

		&.tab-count--5 .wp-block-tab { width: 20%; }
		&.tab-count--5 .wp-block-tab.active .wp-block-tab__content { width: calc(500% + var(--bl) * 4); }

		.wp-block-tab { 
			&:nth-of-type(2) .wp-block-tab__content { margin-left: calc(-100% - var(--bl)); }
			&:nth-of-type(3) .wp-block-tab__content { margin-left: calc(-200% - var(--bl) * 2); }
			&:nth-of-type(4) .wp-block-tab__content { margin-left: calc(-300% - var(--bl) * 3); }
			&:nth-of-type(5) .wp-block-tab__content { margin-left: calc(-400% - var(--bl) * 4); }
		}
	}
}

.wp-block-tab {
	.wp-block-tab__title {
		text-align: center;
		font-size: 24px;
		font-weight: 600;
		cursor: pointer;
		transition: all .3s;
		margin: 0;
		padding-bottom: 1rem;
		color: rgba(92,92,100,.5);
		border-bottom: 4px solid rgba(92,92,100,.5);
		&:hover {
			color: var(--wp--preset--color--contrast);
			border-color: var(--wp--preset--color--contrast);
		}

		&::after {
			position: absolute;
			bottom: -10px;
			left: 0;
			width: 100%;
			height: 18px;
			content: '';
			background-image: url('../../images/tabs-underline.svg');
			background-position: center;
			background-size: 100%;
			background-repeat: no-repeat;
			opacity: 0;
			transition: all 0s;
		}
	}

	.wp-block-tab__content {
		opacity: 0;
		max-height: 0;
		height: auto;
		width: 0;
		padding: 0;
		transition: all 0s;
	}

	&.active {
		.wp-block-tab__title {
			color: var(--wp--preset--color--accent);
			border-color: transparent;
			&::after {
				bottom: -18px;
				opacity: 1;
				transition: all .3s .3s;
			}
		}

		.wp-block-tab__content {
			opacity: 1;
			padding-top: var(--bl);
			width: 100%;
			max-height: 2000px;
			transition: opacity .3s .3s,  max-height 0s, width 0s;
			@media (min-width: 992px) {
				padding-top: calc(var(--bl)*2);
			}
		}
	}
}