.ws-callouts {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-bottom: 30px;
	> a {
		display: grid;
		grid-template-rows: auto auto 1fr auto;
		background-color: white;
		text-decoration: none;
		color: inherit;
		box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.05);
		border: 1px solid hsla(0, 0%, 0%, 0.05);
		.image {
			grid-row: 1;
			box-shadow: 0 0 3em hsla(0, 0%, 0%, 0.3) inset;
			padding-top: 56.25%;
			background-size: cover;
			background-position: center;
		}
		.text {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: 2 / span 3;
			padding: 1em;
			h2 {
				grid-row: 1;
				font-size: 1.2em;
				text-align: center;
			}
			p {
				grid-row: 2;
				font-size: 0.9em;
				line-height: 1.5;
			}
			.click-indicator {
				grid-row: 3;
				display: flex;
				justify-content: center;
				align-items: center;
				svg {
					fill: white;
					height: 2em;
				}
			}
		}
		&:hover {
			text-decoration: none;
			.image {
				-webkit-box-shadow: none;
							box-shadow: none;
				&::before {
					background-color: transparent;
				}
			}
		}
	}
}