@charset "UTF-8";
/* CSS Document */

#review{
    background: var(--white);
    color: var(--brown);
    border-radius: 0 0 1rem 1rem;
    padding-bottom: 15rem;
    margin-bottom: 3rem;
}
@media(max-width: 37.5em) {
	#review{
   padding-bottom: 7rem;
}
}
.review-wrapper{
	max-width: 100%;
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
	gap: 2rem;
}
.review-container{
    width: 270px;
    display: flex;
    flex-direction: column;
}
.review-container img{
    border-radius: 1rem
}
.review__header {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	font-weight: 900;
	padding-bottom: 3rem;
	padding-top: 4rem;
	position: relative;
	text-align: center;
	z-index: 1
}
@media (min-width: 48em) {
	.review__header {
		padding-top: 8rem;
		padding-bottom: 5rem
	}
}
@media(max-width: 37.5em) {
		.review__header {
		gap: 0
	}
}

.review__subtitle {
	color: #573F1C;
	font-size: 1.3rem;
    font-weight: bold;
	letter-spacing: 1.95px;
	line-height: 1.54;
	margin-bottom: 1rem
}
@media (min-width: 48em) {
	.review__subtitle {
		margin-bottom: 0
	}
}
.review__heading {
    color: #573F1C;
	font-family: 'Zen Maru Gothic', serif;
    font-weight: 1000;
    font-size: clamp(3rem, 2.857rem + 0.625vw, 4rem);
	letter-spacing: 1.0;
	line-height: 1.3;
    display: flex;
    justify-content: center;
}

@media (min-width: 48em) {
    .review__heading {
		line-height: 1.3;
        letter-spacing: 3px;
	}
}
.review{
    position: relative;
    text-align: left;
    font-family: 'Zen Maru Gothic', serif;

}
.review-name{
    margin: 1rem 0;
    text-align: center
}
.review-container:nth-of-type(odd) .review-name::after{
    content: "";
    display: inline-block;
    width: 3rem;
    height: 1rem;
    background-image: url("../img/line_yellow.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
    
}
.review-container:nth-of-type(even) .review-name::after{
    content: "";
    display: inline-block;
    width: 3rem;
    height: 1rem;
    background-image: url("../img/line_brown.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
    
}