.block-courses {
    margin-top: -36px;
	&__type {
		position: relative;
		text-decoration: none;
		font-weight: 500;
		font-size: 22px;
		line-height: 30px;
		color: #5d6974;
		padding-top: 8px;
		border-top: 1px solid #5d6974;
		cursor: pointer;
		&.active {
			color: #fff;
			&::before {
				width: 100%;
				background-color: #fff;
			}
		}
		&::before {
			content: "";
			position: absolute;
			width: 0;
			height: 1px;
			left: 0;
			right: 0;
			top: 0;
			background-color: transparent;
			transition: all var(--default-transition-params);
		}
		&-container {
			position: sticky;
			top: calc(var(--header-height, 0rem) + var(--admin-bar-height, 0rem));
			z-index: 2;
			padding-bottom: 10px;
			margin-bottom: 26px;
			background-color: #000;

			--num-cols: 1;

			display: grid;
			grid-template-columns: repeat(var(--num-cols), 1fr);
			gap: var(--grid-column-gutter);
			@include media-min($medium) {
				--num-cols: 4;
			}
		}
	}
	&__label {
		font-weight: 700;
		font-size: 18px;
		line-height: 16px;
		color: #fff;
		margin-bottom: 20px;
		border-left: 2px solid #fff;
		padding-left: 8px;
        margin-top: 36px;
	}
	&__cards-container {
		--num-cols: 1;

		display: grid;
		grid-template-columns: repeat(var(--num-cols), 1fr);
		gap: var(--grid-column-gutter);

		@include media-min($medium) {
			--num-cols: 2;
		}
		@include media-min($large) {
			--num-cols: 3;
		}
	}
}