.block-tabs {
	&__container-mobile {
		display: block;

		@include media-min($large) {
			display: none;
		}
	}

	&__container-desktop {
		display: none;

		@include media-min($large) {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: var(--grid-column-gutter);
		}

		&-column {
			display: block;
			@include media-min($large) {
				display: block;
			}
		}
	}

	&__desktop-nav {
		grid-column: span 1;

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	&__nav-title {
		@include media-min($large) {
			margin-bottom: 1rem;
		}
	}

	&__nav-content {
		margin-top: 2rem;

		@include media-min($large) {
			margin-top: 6rem;
		}
	}

	.block-tabs__nav-button.button--secondary {
		color: var(--tab-nav-button-secondary-normal-color);
		width: 100%;
		text-align: left;
		justify-content: flex-start;

		&::before {
			display: none;
		}
		&::after {
			border-right-color: var(--tab-nav-button-secondary-normal-color);
			border-top-color: var(--tab-nav-button-secondary-normal-color);
		}
		&:hover,
		&.active {
			color: var(--tab-nav-button-secondary-hover-color);
			text-decoration: var(--tab-nav-button-secondary-hover-text-decoration);
			&::after {
				border-right-color: var(--tab-nav-button-secondary-hover-color);
				border-top-color: var(--tab-nav-button-secondary-hover-color);
			}
		}
	}

	&__nav-row-selector {
		display: flex;

		&-container {
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			margin-bottom: 32px;
		}
	}

	.block-tabs__nav-row-selector-image {
		gap: 2rem;
		justify-content: center;
		.block-tabs__nav-button {
			width: 8rem !important;
			height: 64px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all var(--default-transition-params);
			&:hover {
				background-color: var(--color-off-white);
				border-radius: var(--default-border-radius);
			}
			&.active {
				background-color: var(--color-off-white);
				border-radius: var(--tab-border-radius);
				border: 1px solid var(--tab-border-color);
			}
		}
	}

	.block-tabs__nav-row-selector-text {
		.block-tabs__nav-button {
			font-weight: 500;
			font-size: 18px;
			line-height: 21px;
			padding: 12px 10px;
			text-align: center;
			color: #8b96a2;
			border: 1px solid #b9c2ca;
			background: #fff;
			cursor: pointer;
			transition: all var(--default-transition-params);
			
			&.active {
				background: #000;
				border-color: #000;
				color: var(--color-white);
			}
		}
	}

	&__desktop-main {
		grid-column: span 3;

		position: relative;
		padding: 8rem 11rem;
		box-shadow: var(--default-box-shadow);
		border-radius: var(--default-border-radius);

		&-column {
			display: grid;
			--grid-num-cols: 12;
			grid-template-columns: repeat(var(--grid-num-cols, 1), minmax(0, 1fr));
			gap: var(--grid-column-gutter);
			box-shadow: none;
			width: 100%;
			overflow-y: auto;
			&-image {
				padding: 1.6rem;
				border: 1px solid var(--tab-border-color);
			}
			&-text {
				padding: 0;
				.block-tabs__section-top-content {
					border: 1px solid #000000;
					padding: 12px 16px;
				}
			}
		}
	}

	.block-tabs__section-top {
		display: none;
		grid-column: span 12;
		@include media-min($medium) {
			&.is-10 {
				grid-column: 2 / span 10;
			}
			&.is-8 {
				grid-column: 3 / span 8;
			}
		}
		&.active {
			display: block;
		}
	}

	&__image {
		display: none;

		@include media-min($large) {
			display: block;
			border-radius: 100%;
			box-shadow: var(--default-box-shadow);
			object-fit: cover;
			background-color: var(--color-white);

			min-width: 120px;
			min-height: 120px;
			max-width: 120px;
			max-height: 120px;

			position: absolute;
			top: 40px;
			left: -30px;
		}
	}

	&__nav-button-card {
		.card-media {
			border: 1px solid #f4f4f4;
			box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
			border-radius: 8px;
			padding: 2.4rem 3.2rem;
			cursor: pointer;
			i {
				font-size: 4rem;
				color: #2e33b4;
			}
			h5 {
				font-size: 14px;
				margin-bottom: 1rem;
			}
			p {
				margin-bottom: 0;
			}
			&.active {
				background-color: #2e33b4;
				h5,
				p,
				i {
					color: var(--color-white);
				}
				path {
					stroke: white;
				}
			}
		}
	}
	&__card-section {
		display: none;
		&.active {
			display: block;
		}
		&-container {
			overflow: hidden;
			@include media-min($medium) {
				display: flex;
				gap: var(--grid-column-gutter);
				& > div {
					flex: 1;
					width: 50%;
					overflow: hidden;
				}
			}
			h3 {
				border-bottom: 1px solid #3a40e1;
			}
		}
	}
}