:root {
	--color-primary-background: var(--color-brand-ink);
	--color-primary-foreground: rgb(245, 245, 247);
	--color-secondary-background: white;
	--color-secondary-foreground: black;
	--site-navigation-color-background: var(--color-brand-ink);
	--site-navigation-color-foreground: rgb(245, 245, 247);
}
.methodCard
{
	background-color: var(--color-secondary-background);
	border-radius: var(--gap-width);
	box-shadow: 2px 4px 12px rgba(0,0,0,.24);
	color: var(--color-secondary-foreground);
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-areas: "heading" "content";
	height: 100%;
	max-width: 80vw;
	overflow: hidden;
	transition: scale, box-shadow;
	transition-duration: 0.32s;
	transition-timing-function: cubic-bezier(0, 0, 0.5, 1);
	width: 40rem;

	& figure
	{
		height: 40rem;
		overflow: hidden;
		transition: scale;
		transition-duration: 0.32s;
		transition-timing-function: cubic-bezier(0, 0, 0.5, 1);

		& > img
		{
			object-fit: cover;
			object-position: center;
			min-width: 100%;
			min-height: 100%;
		}
	}

	& .__description
	{

		font-size: var(--font-size);
		grid-area: content;
		hyphens: none;
		line-height: 1.5em;
		text-align: justify;
		padding-block: var(--gap-double-width) var(--gap-fourfold-width);
		padding-inline: var(--gap-double-width);

		& em
		{
			color: var(--color-primary-background);
			font-weight: 400;
		}
	}

	& .__header
	{
		display: grid;
		grid-template-areas: "figure" "heading";
	}

	& .__heading
	{
		color: var(--color-primary-background);
		grid-area: heading;
		font-size: var(--font-size-xxl);
		padding-inline: var(--gap-double-width);
		padding-block-start: var(--gap-double-width);
		text-transform: uppercase;
	}

	@media (hover: hover) {
		&:hover {
			box-shadow: 4px 8px 16px rgba(0,0,0,.16);
			scale: 1.02;
		}
		&:hover figure{
			scale: 1.04;
		}
	}

}