/* --- 2. GLOBAL ELEMENTS --- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* --- 3. MOBILE-FIRST STYLES (Default) --- */
.header,
.footer {
	background-color: #165a72;
	color: white;
	padding: 1.6rem;
	text-align: center;
}
img {
	width: 100%;
	height: 100%;
}
.puppy_card {
	background-color: red;
}
.banner_puppy {
	margin-bottom: 2.75rem;
}
.puppy_card {
	margin: 0 3rem 4rem;
}
.more_puppys {
	margin-bottom: 3rem;
	font-weight: 700;
	font-size: 2.1rem;
	text-align: center;
}
/* Hide the pink box on mobile as per design */
.missing_puppy_box {
	display: none;
}
/*. DESKTOP STYLES (Media Query) --- */
/* Activates when the screen is 720px or wider */
@media (min-width: 720px) {
	/* header override  */
	.header {
		font-size: 2.25rem;
	}
	/* banner override  */
	.banner_puppy {
		margin-bottom: 5.25rem;
	}
	/* common all puppys properties*/
	.all_puppys {
		display: flex;
		display: flex;
		justify-content: space-between;
		/* width: 62.25rem; */
		width: 80%;
		/* 16px x 62.25 */
		margin: 0 auto;
	}
	.three_puppys {
		height: 19.8rem;
	}
	.twoPuppy_continer {
		justify-content: space-between;
		gap: 4.5rem;
	}

	.puppy_card,
	.missing_puppy_box {
		width: 32%;
	}

	/* Show and style the pink box */
	.missing_puppy_box {
		background-color: #f75d6f;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		font-size: 3.1rem;
		/* padding: 3.7rem; */
		/* max-width: 19.38rem; */
		/* max-height: 19.38rem; */
		/* flex: 1;
		margin: 0 1rem; */
		/* flex: 1;
		margin: 0 1rem; */
	}
	/* more puppys  */
	.more_puppys {
		margin: 4rem 0;
		font-weight: 700;
		font-size: 2.1rem;
		text-align: center;
	}
	/* puppy acrd override  */
	.puppy_card {
		margin: 0;
	}
	/* footer override  */
	.footer {
		margin-top: 4.6rem;
		padding: 6.25rem 0 7.8rem;
		font-size: 2.25rem;
	}
}