.case_studies_archive-layout {
	margin-top: max(3rem, calc(4 * var(--su)));
}

.case_studies_archive-layout .highlighted-col .case_study-layout {
	background: transparent;
}
.case_studies_archive-layout .highlighted-col .case_study-layout a {
	gap: max(1.5rem, calc(1.5 * var(--su)));
}
.case_studies_archive-layout .highlighted-col .case_study-layout .case_study-content {
	padding: max(1.5rem, calc(3.5 * var(--su)));
	background-color: var(--secondary-blue);
}

.case_studies_archive-layout .highlighted-col .case_study-layout .case_study-content .case_study-title {
	font-size: var(--scaling-h3);
}
.case_studies_archive-layout .highlighted-col .case_study-layout .case_study-image > img {
	aspect-ratio: 7/6;
}

.case_studies_archive-layout .overview-col {
	margin-top: var(--global-row-spacing);
}
.case_studies_archive-layout .case-studies-overview-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: max(2rem, calc(2.5 * var(--su)));
	--button-bg-2: var(--button-bg-1);
    --button-border-color-2: var(--button-border-color-1);
    --button-text-color-2: var(--button-text-color-1);
	--button-border-color-1-hover: var(--primary-jade);
	--button-border-color-2-hover: var(--primary-jade);
	--button-bg-2: var(--button-bg-1);
    --button-border-color-2: var(--button-border-color-1);
    --button-text-color-2: var(--button-text-color-1);
}
.case_studies_archive-layout .case-studies-overview-filters button {
	appearance: none;
	padding-inline: max(1.5rem, calc(1.5 * var(--su)));
    padding-block: max(1.25rem, calc(1.25 * var(--su)));
    line-height: 1;
	transition: border-color 0.3s ease;
}
.case_studies_archive-layout .case-studies-overview-filters button.active {
	--button-bg-1: var(--primary-jade);
    --button-text-color-1: #ffffff;
    --button-border-color-1: var(--primary-jade);
    --button-bg-1-hover: var(--primary-jade);
    --button-text-color-1-hover: #ffffff;
    --button-border-color-1-hover: var(--primary-jade);
    --button-bg-2: var(--primary-jade);
    --button-text-color-2: #ffffff;
    --button-border-color-2: var(--primary-jade);
    --button-bg-2-hover: var(--primary-jade);
    --button-text-color-2-hover: #ffffff;
    --button-border-color-2-hover: var(--primary-jade);
}

.case_studies_archive-layout .case-studies-overview-grid {
	row-gap: var(--pk-column-gap);
}
.case_studies_archive-layout .case-studies-overview-grid > article {
	grid-column: span 4;
}

.case_studies_archive-layout .case-studies-overview-grid.is-loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.case_studies_archive-layout .case-studies-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-top: max(2rem, calc(2.5 * var(--su)));
	flex-wrap: wrap;
	font-size: var(--desktop-body-xs);
	color: var(--deep-pine-50);
}

.case_studies_archive-layout .case-studies-pagination .pagination-btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--deep-pine-20);
	width: 3em;
	height: 3em;
	line-height: 1;
	border-radius: 100%;
	color: var(--text-color);
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: border-color 0.3s ease;
}

.case_studies_archive-layout .case-studies-pagination .pagination-btn:disabled {
	color: var(--deep-pine-20);
	pointer-events: none;
}

.case_studies_archive-layout .case-studies-pagination .pagination-btn .material-symbols-outlined {
	font-size: 1.25em;
	line-height: 0;
}

@media screen and (max-width: 992px) {
	.case_studies_archive-layout .highlighted-col .case_study-layout a {
		gap: 0;
	}
}