/* Everything except the rules in the media queries are for mobile view. */

main {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

.about-image {
	background-image: url(../images/280w-Mars-violin.png);
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	margin: 1rem;
	height: 12rem;
	width: 90%;
}

.about-description {
	text-align: center;
	width: 90%;
	margin: 1rem;
	max-width: 63rem;
	font-size: 1.5rem;
}

/* For tablet view */
@media screen and (max-width: 68rem) and (min-width: 40rem) {
	.about-image {
		background-image: url(../images/640w-Mars-violin.png);
		height: 28rem;
	}

}

/* for desktop view */
@media (min-width: 68rem) {
	.about-image {
		background-image: url(../images/900w-Mars-violin.png);
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		margin: 1rem;
		height: 38rem;
		width: 90%;
	}
}