.campaigns-section {
	max-width: 70rem;
	margin-inline: auto;
	padding-top: 2rem;
}

.campaigns-title, .campaigns-p {
	max-width: unset;
}

.campaigns-title,
.campaigns-p {
	text-align: center;
}

.campaigns-button {
	margin-inline: auto;
}

.campaigns {
	display: grid;
	grid-template-columns: max-content max-content max-content;
	justify-content: space-evenly;
	grid-auto-rows: 1fr;
	column-gap: calc(.5rem + 3%);
	row-gap: 2.5rem;
	margin-block: 4% 2em;
	font-size: var(--font-size-2);
}

.campaign {
	--offset: 0;
	color: var(--blue);
	display: grid;
	justify-content: center;
	grid-template-columns: 3.5em 1fr;
	align-items: center;
	position: relative;
	gap: 1rem;
	padding-block: .5em;
	padding-right: .75em;
	text-align: left;
}

.campaign img {
	justify-self: center;
	width: 100%;
}

.campaign .h3 {
	margin-block: 0;
	font-size: var(--font-size-2);
}

.campaign::before {
	content: ""; display: block;
	position: absolute;
	top: var(--offset);
	bottom: var(--offset);
	left: var(--offset);
	right: var(--offset);
	border: var(--border);
	border-color: transparent;
	border-radius: var(--radius);
	transition-duration: .2s;
	transition-property: var(--offset);
	transition-timing-function: var(--spring-easing);
}

.campaign:hover {
	--offset: calc(-2 * var(--border-1));
}

.campaign:hover::before {
	border-color: unset;
}

.campaigns-p {
	margin-bottom: .5rem; 
	font-size: var(--font-size-1);
}

.campaigns-button {
	color: var(--red);
}

@media (max-width: 55rem) {
	.campaigns {
		margin-top: 1.5rem;
		row-gap: calc(5vw - 0.75rem);
	}

	.campaigns-title,
	.campaigns-p {
		text-align: left;
	}

	.campaigns-button {
		margin-left: 0;
	}
}
@media (max-width: 90rem) {
	.campaigns {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}