@media (min-width: 375px) {

	p {
		font-size: 0.925rem;
	}

	.hero {
		padding: 2rem 2rem 0 2rem;
	}

	.hero-txt p {
		font-size: 1rem;
	}

	.hero-pic-container {
		width: 100%;
	}

	.treat-area,
	.not-alone {
		padding: 2rem 2rem 0 3rem;
	}

	.results {
		padding: 1rem 2rem 1rem 2rem;
	}

	.about,
	.meet {
		padding: 1rem 2rem !important;
	}

	.about-content {
		padding: 1rem 1rem 0 1rem;
	}

	.about-pic-container {
		width: 90%;
	}

	.about-subtitle {
		text-align: center !important;
	}

	.about p {
		text-align: justify;
		hyphens: auto;
	}

	footer {
		padding: 2rem;
	}
}

@media (min-width: 425px) {

	.hero-content {
		gap: 0.25rem;
	}

	.hero-pic-container {
		display: block;
	}
}