.feature {
	display: grid;
	grid-template-areas: 'image' 'text';
	margin: 2rem 0;
	align-items: center;

	img {
		width: 100%;
		grid-area: image;
		text-align: center;
	}

	.feature__text {
		grid-area: text;

		h2 {
			font-size: 2em;
			font-family: Roboto;
			font-style: normal;
			font-weight: 300;
			letter-spacing: -0.005em;
			text-transform: capitalize;
			text-align: center;
		}

		p {
			font-family: Roboto;
			font-style: normal;
			font-weight: 300;
			font-size: 1.1em;
			letter-spacing: -0.005em;
		}
	}

	@include respond-to('medium') {
		grid-template-columns: 50% 50%;

		&:nth-child(odd) {
			grid-template-areas: 'image text';
		}

		&:nth-child(even) {
			grid-template-areas: 'text image';
		}
	}
}
