/*
---01 TYPOGRAPHY
Spacing: 2/4/8/15/16/14/32/48/64/80/96/128

Font Sizes: 10/12/14/16/18/20/24/30/36/44/52/62/74/86/98

Font weights: 400 500 700

line heights:
Default: 

---COLORS:

Primary: 

Tints: 
Shades: 
Accents:
Grey: #555, #333/ Background: #adb5bd
Purples: #920CE8 (darker)#3a055d

---05 Shadows

-- 06 Border-Radius



---07 WHITESPACE


LETERSPACING

*/

/*default 1rem=16px*/
/*revised 1rem=10px*/


p {
    font-size: 2.4rem;
}

.review {
    background-color: #555;
}

.reviewTitle {
    font-size: 5.2rem;
    text-align: center;
    line-height: 10rem;
    vertical-align: middle;
}

.reviewStructureContainer {
    background-color: #ced4da;
    padding: 2.4rem;
    padding-block-start: 6rem;
    padding-block-end: 6rem;
    margin: auto;
    width: 70%;
}

.ratingObject {
    font-size: 5.6rem;
    width: 20rem;
    height: 20rem;
    background-color: #920CE8;
    color: #555;
    border: 1rem solid #555;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating {
    display: flex;
    justify-content: center;
    align-items: center;
}

.videoSpace{

    text-align:center;
}

.videoText{
    margin-top: 1rem;
    font-size: 1.8rem;
    font-style:italic;
}

.video {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #adb5bd;
    padding: 2rem 0 2rem 0;
}

/***PARAGRAPH GENERICS***/



.paragraphLeft {
    grid-column-start: 1;
    grid-column-end: 2;
    margin: auto;
}

.paragraphRight {
    grid-column-start: 2;
    grid-column-end: -1;
    margin: auto;
}

.paragraphFull {
    grid-column-start: 1;
    grid-column-end: -1;
}

@media(max-width:91em) {
    .reviewStructureContainer {
        width: 100%;
    }
}

/***Below 1024***/
@media(max-width: 65em) {
    p {
        font-size: 2rem;
        line-height: 1.3;
    }

    
}


/***TABLET 768****/
@media(max-width: 49em) {
    .reviewStructureContainer {
        grid-template-columns: repeat(1, 1fr);
        margin: 0;
    }
    .fillerPicture {
        margin: auto;
    }

    .paragraphLeft {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    .paragraphRight {
        grid-column-start: 1;
        grid-column-end: -1;
    }
}



/*********MOBILE 425px*********/
@media(max-width: 27em) {

    .reviewStructureContainer {
        grid-row-gap: 5rem;
        width: 41rem;
        margin:auto;
    }

    p {
        font-size: 1.8rem;
    }

    .videoSpace {
        margin-top: 2rem;
    }

    .videoText {
        margin-top: 6rem;
    }

    .video {
        padding: 0;
        width: 40rem;
        height: 22.5rem;
    }

    .reviewTitle {
        line-height: 1;
    }

    .fillerPicture {
        width: 40rem;
        height: 22.5rem;
    }

}