:root {
	--bright-orange: hsl(31, 77%, 52%);
	--dark-cyan: hsl(184, 100%, 22%);
	--very-dark-cyan: hsl(179, 100%, 13%);
	--transparent-white: hsla(0, 0%, 100%, 0.75);
	--very-light-gray: hsl(0, 0%, 95%);
	--primary-font: "Lexend Deca", sans-serif;
	--secondary-font: "Big Shoulders", sans-serif;
}

/* Style Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-size: 15px;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

.container {
	margin: 4rem auto;
	padding: 1.6rem;
}

.card-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	border-radius: 10px;
}

.card-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 3rem;
	color: white;

	h2 {
		padding: 2rem 0;
		font-size: 2.6rem;
		font-weight: 500;
		font-family: var(--secondary-font);
		text-transform: uppercase;
		letter-spacing: 0rem;
		color: var(--very-light-gray);
	}

	p {
		font-family: var(--primary-font);
		line-height: 1.4rem;
		color: var(--transparent-white);
	}

	.btn {
		margin-top: 2rem;
		background-color: var(--very-light-gray);
		padding: 1rem 2rem;
		border-radius: 40px;
		font-family: var(--primary-font);
		font-weight: 500;
	}
}

.sedan {
	background-color: var(--bright-orange);
	border-radius: 10px 10px 0 0;

	.btn {
		color: var(--bright-orange);
	}
}

.suv {
	background-color: var(--dark-cyan);

	.btn {
		color: var(--dark-cyan);
	}
}

.luxury {
	background-color: var(--very-dark-cyan);
	border-radius: 0 0 10px 10px;

	.btn {
		color: var(--very-dark-cyan);
	}
}

@media screen and (min-width: 1000px) {
	.container {
		margin: 10rem auto 2rem auto;
		max-width: 1200px;
		padding: 0 7.4rem;
	}

	.card-container {
		flex-direction: row;
		align-items: stretch;
	}

	.card-section {
		flex: 1;
		p {
			padding-bottom: 3rem;
		}

		h2 {
			font-size: 2rem;
		}
	}

	.sedan {
		border-radius: 10px 0 0 10px;
	}

	.luxury {
		border-radius: 0 10px 10px 0;
	}
}