/* font-family: 'Fraunces', serif; */
/* font-family: 'Montserrat', sans-serif; */

body {
    background-color: hsl(30, 38%, 92%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

p {
    font-size: 14px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: hsl(228, 12%, 48%);
}

.mainContainer {
    display: flex;
    width: 60%;
    border-radius: 10px;
    background-color: white;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;

}

.imageLeft {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.firstTitle {
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: hsl(228, 12%, 48%);
    font-size: 13px;
    letter-spacing: 7px;
    padding-top: 10px;
}

.secondTitle {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    line-height: 30px;
}

.rightBlock {
    padding-left: 30px;
    padding-right: 30px;
}

.buttonStyle {
    color: white;
    background-color: hsl(158, 36%, 37%);
    width: 90%;
    padding: 8px;
    border: none;
    font-size: 15px;
	border-radius: 6px;
}

.attribution {
    text-align: center;
    font-size: 10px;
    padding-top: 5px;
}


.secondContainer {
    display: flex;
    padding-top: 30px;
    padding-bottom: 30px;

}

.price {
    display: flex;
    font-family: 'Fraunces', serif;
    weight: 700;
    color: hsl(158, 36%, 37%);
    font-size: 25px;

}

.priceTwo {
    text-align: center;
    font-size: 10px;
    padding-top: 10px;
    padding-left: 15px;
    text-decoration: line-through;
}


@media screen and (max-width: 470px ) {
    .mainContainer {
        display: block;
		width: 95%;
    }

    .imageLeft {
        display: none;
    }
	
	.mobileImage {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		object-fit: cover;
		width: 100%
		
	}
	
	.secondContainer {
		padding-top: 10px;
	}
	
	.price {
		font-size: 30px;
	}
	
	.priceTwo {
		font-size: 14px;
		color: hsl(228, 12%, 48%);
	}
	
	
	.buttonStyle {
		margin-bottom: 40px;
		margin-top: -10px;
	}
}

/*TABLET*/

@media screen and (min-width: 471px) and (max-width: 976px ) {
	.mobileImage {
		width: 100%;
		height: 200px;
		object-fit: cover;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	
	.imageLeft {
		display: none;
	}
	
	.mainContainer {
    width: 60%;
	margin-top: 30px;
	display: block;
	
	}
	
	.buttonStyle {
		margin-bottom: 40px;
	}
}

/*Desktop*/
@media screen and (min-width: 975px) and (max-width: 2540px ) {
    .mobileImage {
        display: none;
    }
	

}