:root {
	--brown: rgb(111, 81, 63);
	--tan: rgb(207, 194, 171);
}

main {
	position: relative;
	padding: 0;
}

@media screen and (orientation: landscape) and (min-width: 800px) {
	main section {
		min-height: auto;
		padding: 15% 0;
	}
}

.hero .intro>div {
	box-sizing: border-box;
}

.hero .intro .product-image img {
	width: 100%;
	height: auto;

}

@media (min-width: 800px) {
	/* for screens iPad and larger */

	.hero .intro {
		align-items: center;
		gap: 2rem;
	}

	.hero .intro .product-image img {
		width: 80%;
		height: auto;

	}

	.hero .intro>div {
		width: 50%;
	}

}


.hero .prodColors .brown {
	background-color: var(--brown);
	border-width: .05em;
	border-color: rgb(150, 150, 150);
}

.hero .prodColors .tan {
	background-color: var(--tan);
	border-width: .05em;
	border-color: rgb(150, 150, 150);
}

.hero .prodColors .skyblue {
	background-color: #3333ff;
	border-width: 0.05em;
	border-color: #859AAE;

}
.hero .prodColors .brownyellow {
	background-color: rgb(236,228,180);
	border-width: 0.05em;
	border-color: #859AAE;

}

.hero {
	padding: 4rem 0;
	margin-bottom: 0;
	background-color: rgb(133, 154, 174);

}


.hero .feature-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1rem;
}

.hero .feature-icons li {
	flex: 0 1 calc(33.333% - 1rem);
	/* 3 per row, accounting for gap */
	box-sizing: border-box;
}

.prod-photos-a {
	background-color: var(--white);
}

@media (min-width: 800px) {
	.prod-photos-a article {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 1rem;
	}

	.prod-photos-a article div {
		flex: 0 1 calc(33.333% - 1rem);
		/* 3 per row, accounting for gap */
		box-sizing: border-box;

	}

	.prod-photos-a img {
		width: 80%;

	}
}

.megapixels {
	background-image: url(../images/megapixels-bg.jpg);
	background-size: cover;
	background-position: bottom right;
}

.lens {
	color: var(--black);
	background-color: rgb(236, 228, 180);
}

.lens article {
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
}

.lens article div {
	padding: 0;
}

.lens article .text {
	box-sizing: border-box;
	padding: 10%;
}


@media (min-width: 800px) {

	.lens {
		padding: 0;
		margin: 0;
	}

	.lens * {
		padding: 0;
		margin: 0;
	}

	.lens article {
		width: 100%;
		max-width: 100%;
		flex-direction: row;
	}

	.lens article div {
		width: 50%;
	}

	.lens article div:first-of-type {
		padding: 15%;
	}
}

.lcd {
	min-height: 0;
	padding: 0;
	background-color: rgb(130, 167, 176);


}

.lcd img {
	width: 80%;
	height: auto;
}

.hdvideo {
	background-image: url(../images/hdvideo-bg.jpg);
	background-size: cover;
	background-position: 45% center;

}

@media (min-width: 800px) {
	.hdvideo {
		background-position: right center;

	}

}

.battery {
	min-height: 0;
	padding: 0;
	color: var(--black);
	background-color: var(--white);

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

	/* for iPad in portrait mode */

}


@media (min-width: 800px) {

	/* for screens iPad and larger */


}


@media screen and (orientation: landscape) and (min-width:800px) {

	/* styles for screens in portrait orientation iPad and larger */

}