/* stylelint-disable rule-empty-line-before */
.module--type-text {
	&.grey,
	&.charcoal,
	&.yellow,
	&.navy {
		.t-content {
			.ur-course-database {
				.ur-course-filter,
				.course-card {
					background-color: #fff;
				}
			}
		}
	}

	.t-content {
		.ur-course-database {
			margin: 0 auto;

			.ur-course-filter {
				background: #f4f4f4;
				padding: 20px;
				margin-bottom: 30px;
				margin-top: 0;

				p {
					margin-bottom: 0;
					button {
						margin: 0;
					}
				}

				.t-content .button {
					margin: 0;
				}
			}

			.filter-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}

			.filter-option {
				display: flex;
				flex-direction: column;
			}

			.filter-option label {
				margin-bottom: 5px;
				font-weight: bold;
			}

			.filter-option select {
				width: 100%;
				padding: 8px;
				border: 1px solid #ddd;
			}

			.card-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				gap: 20px;
			}

			.course-card {
				background: #f4f4f4;
				padding: 1rem;
				display: flex;
				flex-direction: column;
				gap: 0.5rem;
			}

			.course-card p {
				margin: 0;
				color: #252525;
			}

			.course-card-title {
				font-size: 1.5rem;
				line-height: 1.2;
				font-weight: 700;
				color: #252525;
				margin-bottom: 0.5rem;
			}

			.course-card strong {
				color: #252525;
			}

			button.button {
				background: #fff;
				border: 2px solid #021bc3;
				color: #021bc3;
				padding: 10px 15px;
				cursor: pointer;
				font-weight: bold;
				transition: all 0.2s ease-in-out;
			}

			button.button:hover {
				background: #021bc3;
				border-color: #021bc3;
				color: #fff;
			}

			@media (max-width: 768px) {
				.filter-grid {
					grid-template-columns: 1fr;
				}
			}
		}
	}
}