.sponsors {
	background: var(--c-bg);
	border-block-start: 1px solid var(--c-border);
}

.sponsors__header {
	text-align: center;
}

.sponsors__header .section__sub {
	margin-inline: auto;
	margin-block-start: 0.75rem;
}

.sponsors__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-block-start: 3rem;
}

.sponsor {
	min-block-size: 7.5rem;
	margin: 0;
	background: var(--c-white);
	border: 1.5px solid var(--c-border);
	border-radius: 1rem;
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

/* An author-level display value beats the UA rule for [hidden], so the
   collapsed state has to be spelled out. */
.sponsor[hidden] {
	display: none;
}

.sponsor:hover {
	border-color: var(--c-gold);
	box-shadow: 0 8px 32px rgb(0 0 0 / 0.08);
	transform: translateY(-3px);
}

.sponsor a {
	display: grid !important;
	place-items: center;
  padding: 2rem 2.25rem;
	height: 100%;
}

.sponsor img {
	max-block-size: 4.5rem;
	max-inline-size: 12.5rem;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
	transition: transform 0.25s;
}

.sponsor:hover img {
	transform: scale(1.04);
}

/* --------------------------------------------------------------- toggle */
.sponsors__toggle-wrap {
	margin-block-start: 2.25rem;
	text-align: center;
}

.sponsors__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	font-family: var(--ff-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--c-mid);
	background: transparent;
	border: 1.5px solid var(--c-border);
	border-radius: 6.25rem;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.sponsors__toggle:hover {
	background: var(--c-white);
	border-color: var(--c-gold);
}

/* Chevron drawn from borders so it inherits the label colour. */
.sponsors__toggle-icon {
	inline-size: 0.4375rem;
	block-size: 0.4375rem;
	margin-block-start: -0.1875rem;
	border-block-end: 1.5px solid currentColor;
	border-inline-start: 1.5px solid currentColor;
	rotate: -45deg;
	transition: rotate 0.25s, margin 0.25s;
}

.sponsors__toggle[aria-expanded="true"] .sponsors__toggle-icon {
	margin-block-start: 0.1875rem;
	rotate: 135deg;
}

.sposer-custom {
	display: grid;
	place-items: center;
}

@media (width <= 48rem) {
	.sponsors__grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.875rem;
		margin-block-start: 2.25rem;
	}

	.sponsor {
		min-block-size: 5.625rem;
	}

	.sponsor a {
    padding: 1.375rem 1rem;
	}

	.sponsor img {
		max-block-size: 3.375rem;
		max-inline-size: 8.75rem;
	}
}

@media (width <= 30rem) {
	.sponsors__grid {
		gap: 0.625rem;
	}

	.sponsor {
		min-block-size: 5rem;
	}

	.sponsor a {
		padding: 1.125rem 0.75rem;
	}

	.sponsor img {
		max-block-size: 2.75rem;
		max-inline-size: 6.875rem;
	}
}

@media (width <= 23.4375rem) {
	.sponsors__grid {
		gap: 0.5rem;
	}

	.sponsor {
		min-block-size: 4.5rem;
	}

	.sponsor a {
		padding: 0.875rem 0.625rem;
	}

	.sponsor img {
		max-block-size: 2.375rem;
		max-inline-size: 6rem;
	}
}

@media (width <= 20rem) {
	.sponsors__grid {
		grid-template-columns: 1fr;
	}

	.sponsor img {
		max-block-size: 2.75rem;
		max-inline-size: 10rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sponsor,
	.sponsor:hover,
	.sponsor img,
	.sponsor:hover img,
	.sponsors__toggle-icon {
		transition: none;
		transform: none;
	}
}