:root {
    --pricingCard-background-color: #fff5e9;
}

.vrPricing {
    display: flex;
    gap: var(--gap);
    justify-content: center;
    padding:4rem;

    .pricing-card {
        position: relative;
        background-color: var(--pricingCard-background-color);
        border-radius: .5rem;
        padding: var(--gap);
        font-size: 0.85rem;
        flex-grow: 1;
        flex-basis: 0;

        &:hover {
            outline: .1rem solid var(--vr-color);
        }

        figure:not(:empty) {
            position: relative;
            border-radius: .5rem;
            width: calc(100% + 2 * var(--gap));
            right: var(--gap);
            bottom: var(--gap);
            overflow: hidden;

            img,
            video{
                width: 100%;
                height: auto;
            }
        }

        h3 {
            font-weight: bold;
            font-size: 1rem;
            margin: 0;
            white-space: nowrap;
            text-overflow: ellipsis;

            &+div {
                height: 2rem;

            }
        }

        .fee {
            margin-top: 2rem;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: .1rem solid #aaa;

            >span {
                display: block
            }

            .price {
                font-size: 1rem;
                font-weight: bold;
            }

        }

        .timing {
            margin: 1rem 0;
        }

        .what {
            margin: 1rem 0;

            >span {

                font-weight: bold;
                display: block;
            }

            >div {
                margin: 1rem 0;
                padding-bottom: 3rem;

                ul {
                    padding-left: 0rem;

                    li {
                        margin: 1rem 0;
                        position: relative;
                        margin-left: 1.5rem;


                        &:before {
                            content: '\2713';
                            display: inline-block;
                            position: absolute;
                            top: 0.2rem;
                            left: -1.5rem;
                            background: var(--vr-color);
                            width: .9rem;
                            height: .9rem;
                            line-height: .9rem;
                            font-size: .4rem;
                            text-align: center;
                            color: #fff;
                            border-radius: 50%;
                        }
                    }
                }
            }
        }

        .button {
            position: absolute;
            left: var(--gap);
            bottom: var(--gap);
            right: var(--gap);
        }
    }


    @media all AND (max-width: 700px) {

        flex-direction: column;
        padding: var(--gap);

        .pricing-card {
            font-size: .9rem;

            .button {
                width: calc(100% - 2 * var(--gap));
            }
        }

    }


}