@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Leckerli+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Send+Flowers&display=swap');

:root{
    --background-color-main: white;
    --background-color: #f8f9f9;
    --secondary-background-color: #e5e7e9 ;
    --accent-color: #d055e7 ;
    --text-color-main: #212121;
    --text-color-secondary: #7d7d7d;
    --text-color-third: #d7dbdd;
    interpolate-size: allow-keywords;

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;                           
    --text-stylish1: Leckerli One;
    --text-stylish2: Send Flowers;
}

main{
    .body-container{
        .section-5{
            position: relative;
            height: 100vh;
            background: #f9bcd7;
            box-shadow:  200px 0px 1px #f9bcd7,
                        -200px -0px 1px #f9bcd7;

            .section-5-header{
                display: flex;
                align-items: flex-end;
                justify-content: center;
                height: 10%;
                font-family: var(--text-regular2);
                font-size: 30px;
                text-wrap: nowrap;
            }
            .section-5-content{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 70%;

                .review-cards-container{
                    width: 90%;
                    height: 60%;
                    overflow-y: scroll;
                    scrollbar-width: none;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    
                    .review-card{
                        display: flex;
                        isolation: isolate;
                        height: 231px;
                        width: 85%;
                        margin-bottom: 9px;
                        padding: 15px 10px;
                        border-radius: 20px;
                        color: var(--text-color-main);
                        font-family: var(--text-regular2);
                        cursor: pointer;

                        animation: appear .4s linear;
                        animation-timeline: view();
                        animation-range: entry 0% cover 40%;

                        .info{
                            position: absolute;
                            bottom: 0;
                            margin-bottom: 5%;
                        }
                    }
                    .review-card::before{
                        content: '';
                        position: absolute;
                        inset: 0;
                        border-radius: inherit;
                        background: rgba(255, 255, 255, 0.25);
                        border: 1px solid rgba(255, 255, 255, 0.7);
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                        z-index: -1;
                    }
                }
            }
        }
    }
}

@keyframes appear{
    from{
        scale: 0.6;
        opacity: 0;
    }
    to{
        scale: 1;
        opacity: 1;
    }
}

@media (max-width: 900px){
    main{
        .body-container{
            .section-5{
                box-shadow:  150px 0px 1px #f9bcd7,
                            -160px -0px 1px #f9bcd7;
                .section-5-header{
                    font-size: 25px;
                }
                .section-5-content{
                    .review-cards-container{
                        grid-template-columns: 1fr 1fr;
                        gap: 10px;
                        .review-card{
                            width: 90%;
                            font-size: 17px;
                            .info{
                                font-size: 17px;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 500px){
    main{
        .body-container{
            .section-5{
                box-shadow:  0px 0px 1px #f9bcd7,
                            -0px -0px 1px #f9bcd7;
                .section-5-header{
                    font-size: 20px;
                }
                .section-5-content{
                    .review-cards-container{
                        .review-card{
                            height: 200px;
                            width: 85%;
                            margin-bottom: 5px;
                            font-size: 14px;
                            .info{
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
}