@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');

:root {
        --moderate-violet: hsl(263, 55%, 52%);
        --very-dark-grayish-blue: hsl(217, 19%, 35%);
        --very-dark-blackish-blue: hsl(219, 29%, 14%);
        --white: hsl(0, 0%, 100%);
        --light-gray: hsl(0, 0%, 81%);
        --light-grayish-blue: hsl(210, 46%, 95%);
}

* {
        margin: 0;
        padding: 0;
        box-sizing: 0;
        font-size: 13px;
        font-family: 'Barlow Semi Condensed', sans-serif;
}

body {
        background-color: var(--light-gray);
}

main {
        margin: auto;
        max-width: 1120px;
        height: 95vh;
        padding: 0px 15px;
}

.container {
        height: 100%;
        display: flex;
        align-items: center;
}

.area-testimonials {
        display: grid;
        grid-template-columns: repeat(4, 256px);
        gap: 30px;
}

        .card-purple {
                color: var(--white);
                background-image: url(images/bg-pattern-quotation.svg);
                background-position: right 100px top;
                background-repeat: no-repeat;
                background-color: var(--moderate-violet);
        }

        .card-white {
                background-color: var(--white);
                color: var(--very-dark-grayish-blue);
        }

        .card-grayblue {
                background-color: var(--very-dark-grayish-blue);
                color: var(--white);
        }

        .card-darkblue {
                background-color: var(--very-dark-blackish-blue);
                color: var(--white);
        }

                .first {grid-column: 1 / 3; grid-row: 1 / 2;}
                .second {grid-column: 3 / 4; grid-row: 1 / 2;}
                .third {grid-column: 1 / 2; grid-row: 2 / 3;}
                .fourth {grid-column: 2 / 4; grid-row: 2 / 3;}
                .fifth {grid-column: 4 / 5; grid-row: 1 / 3;}

.card {
        border-radius: 10px;
        padding: 33px;
        display: flex;
        flex-direction: column;
}

        .card-profile {
                display: flex;
                align-items: center;
        }

                .card-profile-img {
                        
                        margin-right: 15px;
                }

                        .card-profile-img img {
                                border-radius: 50%;
                                width: 30px;
                                height: auto;
                        }

                        .card-purple img,
                        .card-darkblue img {
                                border: 3px solid var(--moderate-violet);
                        }
        

                .card-profile-info span {
                        font-size: 10px;
                        display: block;
                        opacity: 0.5;
                }

        .card-main-text {
                font-size: 20px;
                font-weight: 600;
                margin: 15px 0px;
        }

        .card-second-text {
                opacity: 0.7;
                line-height: 20px;
                height: 100%;
                display: flex;
                align-items: flex-end;
        }

.attribution { width: 100%; text-align: center; font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); text-decoration: none; }
.attribution a:hover {font-weight: 600;}

@media screen and (max-width: 768px) {
        main {
                height: auto;
        }

        .container {
                padding: 30px 15px;
                display: block;
        }

        .area-testimonials {
                display: grid;
                grid-template-columns: repeat(3, auto);
                gap: 20px;
        }

        .first {grid-column: 1 / 3; grid-row: 1 / 2;}
        .second {grid-column: 3 / 4; grid-row: 1 / 2;}
        .third {grid-column: 1 / 2; grid-row: 2 / 3;}
        .fourth {grid-column: 2 / 4; grid-row: 2 / 3;}
        .fifth {grid-column: 1 / 4; grid-row: 3 / 4;}     
        
        .attribution { margin-bottom: 20px;}
}

@media screen and (max-width: 500px) {

        .container {
                padding: 0px;
                
        }

        .area-testimonials {
                display: block;
        }

        .card {
                padding: 30px;
                margin: 20px 10px;
        }

        .first,
        .second,
        .third,
        .fourth, 
        .fifth {max-width: 400px; height: auto;}        
}