@media only screen {
	.cards-3-across {
		position: relative;
		max-width: 520px;
		margin: 35px auto 50px;
	}

	.cards-3-across .slides {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cards-3-across .slide {
		margin: 0 0 40px;
	}

	.cards-3-across .slide .image-wrapper {
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
	
	.cards-3-across .slide .image-wrapper,
	.cards-3-across .slide h4 {
		width: calc(100% - 60px);
		margin: 0 auto;
	}

	.cards-3-across .slide img {
		display: block;
		position: relative;
		width: 100%;
	}

	.cards-3-across .slide h4 {
		display: block;
		margin-block-start: 10px;
		margin-block-end: 0;
		color: white;
	}

	.cards-3-across .slide a {
		color: inherit;
		text-decoration: none;
	}

	.cards-3-across .slide a:hover {
		text-decoration: underline;
	}
}

@media (min-width: 520px) {
	.cards-3-across {
		max-width: 520px;
	}

	.cards-3-across .slide .image-wrapper,
	.cards-3-across .slide h4 {
		width: 460px;
	}
}

@media (min-width: 1025px) {
	.cards-3-across {
		max-width: 1220px;
		margin: 20px auto 100px;
	}

	.cards-3-across .slides {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 20px;
		align-items: flex-start;
		margin: 0 30px;
	}

	.cards-3-across .slide {
		margin: 0;
	}

	.cards-3-across .slide .image-wrapper,
	.cards-3-across .slide h4 {
		width: 100%;
	}
	
	.cards-3-across .slide .image-wrapper {
		top: 10px;
		height: auto;
		transition: top 250ms ease-in-out;
	}

	.cards-3-across .slide h4 {
		width: 100%;
		margin-top: 30px;
	}

	.cards-3-across .slide img {
		width: 100%;
		transition: transform 250ms ease-in-out;
	}

	.cards-3-across .slide a:hover .image-wrapper {
		top: 0;
	}

	.cards-3-across .slide a:hover img {
		transform: scale(1.05);
	}
}