.buttonGroup
{
	display: grid;
	gap: 50px;
	justify-items: center;
}

.buttonGroup .tile
{
	background: var(--theme-colour);
	display: block;
	border-radius: 20px;
	text-decoration: none;
	width: 100%;
	overflow: hidden;
	max-width: 440px;

	display: grid;
	grid-template-areas: "thumb" "title";
}

.tile::before
{
	content: "";
	width: 73px;
	height: 73px;
	--start: 46%;
	--end: 54%;
	background:
		linear-gradient(var(--wp--preset--color--white) 20%, #0000 20%, #0000 80%, var(--wp--preset--color--white) 80%),
		linear-gradient(90deg, var(--wp--preset--color--white) 20%, #0000 20%, #0000 80%, var(--wp--preset--color--white) 80%),
		linear-gradient(#0000 46%, var(--theme-colour) 46%, var(--theme-colour) 54%, #0000 54%),
		linear-gradient(90deg, #0000 46%, var(--theme-colour) 46%, var(--theme-colour) 54%, #0000 54%),
		var(--wp--preset--color--white);
	border-radius: 50%;
	grid-area: thumb;
	justify-self: center;
	align-self: end;
	position: relative;
	z-index: 1;
	transform: translateY(50%);
}

.buttonGroup .buttonThumb
{
	mix-blend-mode: luminosity;
	opacity: 0.25;
	grid-area: thumb;

	/* The following was added because images were uploaded that were too small */
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.buttonGroup .hoverThumb
{
	display: none;
	grid-area: thumb;

	/* The following was added because images were uploaded that were too small */
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.buttonGroup .title
{
	font-size: var(--wp--preset--font-size--twentyfive);
	font-weight: 700;
	color: var(--wp--preset--color--white);
	text-transform: uppercase;
	text-align: center;
	padding: 45px 20px;
	grid-area: title;
}

@media (min-width: 400px)
{
	.buttonGroup
	{
		grid-template-columns: repeat(auto-fill, minmax(315px, 1fr));
	}
}

@media (hover: hover)
{
	.buttonGroup .hoverThumb
	{
		display: block;
		opacity: 0;
		transition: opacity 0.2s linear;
	}

	.buttonGroup .tile:hover .hoverThumb
	{
		opacity: 1;
	}
}