.df-certifications-section {
	--df-certs-gap: 1.5rem;
	--df-certs-per-view: 2;

	padding: 0 1.5625rem;

	margin-block: var(--df-space-10);

	background-color: #FFFFFF;
}

.df-certifications-section__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 1rem;
}

.df-certifications-section__heading {
	margin: 0;

	font-size: clamp(1.875rem, 3vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: #000000;
}

.df-certifications-section__heading-spacer {
	display: block;

	min-height: 1px;
}

.df-certifications-section__nav {
	display: flex;
	flex-shrink: 0;
	align-items: center;

	gap: .5rem;
}

.df-certifications-section__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 2.5rem;
	height: 2.5rem;
	padding: 0;

	color: #6B7280;

	border: .0625rem solid #D1D5DB;
	border-radius: 50%;
	background: #FFFFFF;

	cursor: pointer;

	transition: color .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease;
}

.df-certifications-section__arrow svg {
	display: block;

	width: 1.125rem;
	height: 1.125rem;
}

.df-certifications-section__arrow:hover:not(:disabled),
.df-certifications-section__arrow:focus-visible:not(:disabled) {
	color: #111827;

	border-color: #9CA3AF;
	outline: none;
}

.df-certifications-section__arrow:disabled {
	opacity: .35;

	cursor: default;
}

.df-certifications-section__nav[hidden] {
	display: none;
}

.df-certifications-section__viewport {
	margin-top: 1.75rem;

	overflow-x: auto;
	overflow-y: hidden;

	scrollbar-width: none;
	-ms-overflow-style: none;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	outline: none;

	container-type: inline-size;
	container-name: df-certs;
}

.df-certifications-section__viewport::-webkit-scrollbar {
	display: none;
}

.df-certifications-section__track {
	display: flex;
	align-items: flex-start;

	width: max-content;
	min-width: 100%;
	padding: 0;
	margin: 0;

	list-style: none;

	gap: var(--df-certs-gap);
}

.df-certifications-section__item {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	width: calc((100cqi - (var(--df-certs-per-view) - 1) * var(--df-certs-gap)) / var(--df-certs-per-view));

	text-align: center;

	scroll-snap-align: start;
}

.df-certifications-section__link {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;

	color: inherit;
	text-decoration: none;
}

.df-certifications-section__link:hover .df-certifications-section__label,
.df-certifications-section__link:focus-visible .df-certifications-section__label {
	color: #374151;
}

.df-certifications-section__logo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 7.1875rem;
}

.df-certifications-section__image {
	display: block;

	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;

	object-fit: contain;

	opacity: .7;

	filter: grayscale(1);

	transition: opacity .25s ease, filter .25s ease;
}

.df-certifications-section__item:hover .df-certifications-section__image,
.df-certifications-section__item:focus-within .df-certifications-section__image,
.df-certifications-section__link:hover .df-certifications-section__image,
.df-certifications-section__link:focus-visible .df-certifications-section__image {
	opacity: 1;

	filter: grayscale(0);
}

.df-certifications-section__label {
	margin: 2rem 0 0;

	font-size: 1.125rem;
	line-height: 1.35;
	color: #9CA3AF;
}

@media (min-width: 48rem) {
	.df-certifications-section {
		--df-certs-gap: 2rem;
		--df-certs-per-view: 3;
	}
}

@media (min-width: 61.3125rem) {
	.df-certifications-section {
		--df-certs-gap: 1.5rem;
		--df-certs-per-view: 5;

		padding: 0;

		margin-block: var(--df-space-16);
	}

	.df-certifications-section__viewport {
		margin-top: 2.25rem;
	}
}