.docs-header {
	& .name {
		font-size: 50px;
	}
}

.docs-material {
	display: flex;
	flex-direction: column;
	gap: 40px;

	& .docs-filter {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;

		& .filter {
			cursor: pointer;
			color: var(--grayish);
			user-select: none;
			border: 1px solid var(--grayish);
			border-radius: 10px;
			padding: 15px;
			transition: .3s all ease;

			&.active {
				color: var(--white);
				background-color: var(--midnight);
			}
		}
	}

	& .docs-carousel {
		display: flex;

		& .item {
			display: flex;
			flex-direction: column;
			justify-content: end;
			padding: 25px;
			border: 1px solid #CAD2DD;
			border-radius: 25px;
			min-height: 370px;
			overflow: hidden;

			& .info {
				display: flex;
				flex-direction: column;
				gap: 20px;

				& .name {
					font-weight: 600;
				}

				& .link {
					padding: 17px;
					border-radius: 8px;
					font-weight: 600;
				}
			}

			& .category {
				position: absolute;
				top: 25px;
				right: 25px;
				background-color: var(--breeze);
				border-radius: 10px;
				padding: 0px 10px;
				max-width: 65%;
			}

			& .bg-item {
				position: absolute;
				top: -10px;
				left: 0;
				user-select: none;
			}
		}

		& .owl-nav {
			display: none;
		}
	}
}

@media screen and (max-width: 1200px) {
	.docs-header {
		& .name {
			font-size: 30px;
		}
	}

	.docs-material {
		& .docs-filter {
			gap: 20px;
		}

		& .docs-carousel {
			& .item {
				min-height: 350px;

				& .info {
					gap: 15px;
				}
			}
		}
	}
}

@media screen and (max-width: 600px) {
	.docs-header {
		& .name {
			font-size: 24px !important;
		}
	}

	.docs-material {
		& .docs-filter {
			overflow-x: scroll;
			flex-wrap: nowrap;
			padding-bottom: 20px;

			& .filter {
				text-wrap: nowrap;
			}
		}
	}
}