@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kumbh+Sans:wght@100..900&family=League+Spartan:wght@100..900&family=Lexend+Deca:wght@100..900&family=Outfit:wght@100..900&family=Young+Serif&display=swap');
:root{
    --white: hsl(0, 0%, 100%);
    --pink: hsl(333, 80%, 67%);
    --vdmagenta: hsl(300, 43%, 22%);
    --dgmagenta: hsl(303, 10%, 53%);
    --lgmagenta: hsl(300, 24%, 96%);
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-image: url('images/bg-pattern-top-mobile.svg'),url('images/bg-pattern-bottom-mobile.svg');
    background-position: top left,bottom right;
    background-repeat: no-repeat,no-repeat;
    background-size: 100% 15%,100% 28%;
}
.card{
    width: clamp(20rem,85vw,37.5rem);
    height: 96rem;
    font-family: 'League Spartan';
    font-weight: 400;
    font-size: 1rem;
    color: var(--dgmagenta);
    margin-inline: calc((100vw - clamp(20rem,85vw,37.5rem))/2);
    line-height: 1.5rem;
}
h1{
    color: var(--vdmagenta);
    margin-block-start: 5vh;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2rem;
    text-align: center;
}
.description{
    margin-block-start: 1.25rem;
    margin-block-end: 3rem;
    text-align: center;
}
.ratings{
    width: clamp(20rem,85vw,37.5rem); 
    height: 4.5rem;
    background-color: var(--lgmagenta);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--vdmagenta);
    font-weight: 700;
    margin-block: 1.5rem;
}
.stars{
    width: 40%;
    height: 40%;
    display: flex;
}
.star{
    width: 50%;
    height: 100%;
    background-image: url('images/icon-star.svg');
    background-repeat: no-repeat;
    background-position: center;
}
.review{
    background-color: var(--vdmagenta);
    margin-block: 2rem;
    padding-inline: 12%;
    padding-block: 10%;
    height: 12rem;
    font-weight: 500;
    border-radius: 0.5rem;
}
.review img{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    float: left;
    margin-inline-end: 1.5rem;
}
.name{
    color: var(--lgmagenta);
    margin: 0;
}
.customer{
    color: var(--pink);
    margin: 0;
}
.text{
    color: var(--lgmagenta);
}
@media (min-width: 56.25rem) {
    body{
        align-items: normal;
        height: 100vh;
        background-image: url('images/bg-pattern-top-desktop.svg'),url('images/bg-pattern-bottom-desktop.svg');
        background-size: 40% 50%,75% 80%;
    }
    .card{
        width: clamp(56.25rem,80vw,72rem);
        height: 35rem;
        display: grid;
        grid-template-areas: "a b"
        "c c";
        margin-inline: 0;
        margin-block: 7.5rem;
    }
    .a{
        grid-area: a;
        width: calc((clamp(56.25rem,80vw,72rem)/2) -25%);
        height: 17.5rem;
    }
    h1{
        font-size: 3.25rem;
        margin-block-start: 0;
        text-align: left;
        line-height: 2.5rem;
        padding-inline-end: 25%;
    }
    .description{
        text-align: left;
        padding-inline-end: 22.5%;
    }
    .b{
        grid-area: b;
        width: calc(clamp(56.25rem,80vw,72rem)/2);
        height: 17.5rem;
    }
    .ratings{
        width: 80%;
        height: 3.25rem;
        margin-block: 1rem;
        flex-direction: row;
        justify-content: space-evenly;
    }
    .stars{
        width: 25%;
        height: 80%;
    }
    .ratings:nth-child(2){
        margin-inline-start: 10%;
    }
    .ratings:nth-child(3){
        margin-inline-start: 20%;
    }
    .c{
        grid-area: c;
        width: clamp(56.25rem,80vw,72rem);
        height: 17.5rem;
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    .inside{
        position: relative;
        width: 32%;
        height: 80%;
    }
    .review{
        width: 26%;
        height: 80%;
        margin-block: 0;
        padding-inline: 3%;
        padding-block: 0;
        padding-block-start: 3%;
    }
    .review:nth-of-type(2){
        margin-top: 1.5%;
    }
    .review:nth-of-type(3){
        margin-top: 3%;
    }
}