html{
	width: 100%;
	height: 100%;

	padding: 0;
	margin: 0;
}

body{
	width: 100%;
	height: 100%;

	padding: 0;
	margin: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: hsl(30, 38%, 92%);

	font-size: 14px;
}

.container{
	width: 50%;
	height: 50%;

	padding: 0;
	margin: 0;   

	display: flex;
	justify-content: center;

	border-radius: 15px;

	background-color: hsl(0, 0%, 100%);

}

.left{
	width: 50%;
	height: auto;

	background-image: url('/projects/frontendMentor/product-preview-card-component-main/images/image-product-desktop.jpg');
	background-size: cover;

	border-radius: 15px 0px 0px 15px;
}

.right{
	width: 50%;
	height: auto;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.right-header{
	width: 80%;
	height: 32.5%;

	margin-top: 5%;
}

.right-header-title-minor{
	font-family: 'Montserrat';
	letter-spacing: 3px;
	font-weight: 700;
	color: hsl(228, 12%, 48%);
}

.right-header-title-major{
	width: 70%;
	font-family: 'Fraunces';
	font-weight: 700;
	font-size: 2rem;
	color: hsl(212, 21%, 14%);
}

.right-main{
	width: 80%;
	height: 25%;

	display: flex;
	align-items: center;
}

.right-main > div{
	text-align: left;
	font-family: 'Montserrat';
	font-weight: 500;
}

.right-footer{
	width: 80%;
	height: 32.5%;

	margin-bottom: 5%;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.right-footer-price{
	height: 50%;
	width: 100%;

	display: flex;
	align-items: center;
	gap: 25px;
}

.right-footer-price-major{
	font-family: 'Fraunces';
	font-weight: 700;
	font-size: 2rem;
	color: hsl(158, 36%, 37%);
}

.right-footer-price-minor{
	font-family: 'Montserrat';
	font-weight: 700;
	color: hsl(228, 12%, 48%);
	text-decoration: line-through;
}

.right-footer-input{
	width: 100%;
	height: 30%;

	background-color: hsl(158, 36%, 37%) ;

	display: flex;
	align-items: center;
	justify-content: center;

	gap: 5px;
	border-radius: 5px;

	cursor: pointer;

	transition: .5s;
}

.right-footer-input:hover{
	background-color: hsl(158, 36%, 27%) ;
}

.right-footer-input:hover>input{
	background-color: hsl(158, 36%, 27%) ;
}

input{
	background-color:  hsl(158, 36%, 37%);
	border: none;
	color: #FFF;

	font-family: 'Montserrat';
	font-weight: 700;

	cursor: pointer;

	transition: .5s;
}

@media (max-width: 375px){
	.container{
		width: 90%;
		height: 90%;
		flex-direction: column;
	}

	.left{
		width: 100%;
		height: 50%;

		background: url('/projects/frontendMentor/product-preview-card-component-main/images/image-product-mobile.jpg');
		background-size: cover;
		background-repeat: no-repeat;

		border-radius: 15px 15px 0px 0px;
	}
	.right{
		width: 100%;
		height: 100%;
	}

	.right-header-title-major{
		width: 100%;
	}


}