#img-working {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.job-attr {
	display: grid;
	grid-template-columns: 160px 10px 1fr; /* label | colon | value */
	row-gap: 4px;
}

.job-attr .colon,
.job-attr .value {
	text-align: left;
}

.job-card {
	font-family: var(--font-family-paragraph);
	font-weight: 300;
	height: 280px;
	position: relative;
}

.job-card-body {
	display: flex;
	flex-direction: column;
}

.job-title-viewall {
	color: var(--color-primary);
}

.job-card {
	border: none;
}

.job-card .job-attr-name {
	margin-bottom: 4px;
}

.card {
	transition: background-color 0.3s ease, color 0.3s ease;
}

.card:hover {
	background-color: #048dd7;
	color: white;
}

.card:hover .job-title-viewall,
.card:hover .job-attr-name,
.card:hover .job-attr-name span,
.card:hover .posting-time,
.card:hover .posting-time span {
	color: white;
}

label,
input,
select,
option {
	font-family: var(--font-family-paragraph) !important;
	font-weight: var(--font-weight-paragraph) !important;
	font-style: var(--font-style-paragraph) !important;
	font-size: var(--font-size-paragraph) !important;
	letter-spacing: var(--letter-spacing-paragraph) !important;
	line-height: var(--line-height-paragraph) !important;
}

input,
select,
option {
	border-radius: 0px !important;
}

.content .page-item .page-link {
	border-radius: 0px;
}

.page-link.active,
.active > .page-link {
	background-color: #048dd7;
	border-color: #048dd7;
}

.page-link {
	color: #048dd7;
}

.page-item a {
	font-family: var(--font-family-paragraph) !important;
	font-weight: var(--font-weight-paragraph) !important;
	font-style: var(--font-style-paragraph) !important;
	font-size: var(--font-size-paragraph) !important;
	letter-spacing: var(--letter-spacing-paragraph) !important;
	line-height: var(--line-height-paragraph) !important;
}

#reset-btn {
	font-family: var(--font-family-paragraph);
	background-color: #737373;
	color: #f7f7f7;
	padding: 8px 12px;
	border: none;
}

#reset-btn:hover {
	background-color: #b93342 !important;
}

.pagination {
	border-radius: 0px !important;
}

/* Small screen (default) — full width stacked */
.filters-bar {
	width: 100%;
}

#reset-btn {
	width: 100%;
}

/* Medium & up — limit width to 600px and shrink reset button */
@media (min-width: 768px) {
	.filters-bar {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	#reset-btn {
		width: auto;
	}
}