/* =========================
                                       CARD GRID WRAPPER
                                    ========================= */
                                    .card-grid {
                                        display: grid;
                                        grid-template-columns: repeat(auto-fit, 300px);
                                        gap: 20px;
                                        max-width: 1400px;
                                        margin: 0 auto;
                                        justify-content: center;
                                    }

                                    .card-grid.card-grid--mini {
                                        grid-template-columns: repeat(auto-fit, 375px);
                                    }

                                    /* =========================
                                       BIG CARD (GRID ITEM)
                                    ========================= */
                                    .big-card {
                                        position: relative;
                                        width: 100%;
                                        max-width: 485px;
                                        min-height: 400px;

                                        display: flex;
                                        flex-direction: column;
                                        justify-content: flex-end;

                                        border-radius: 1rem;
                                        overflow: hidden;

                                        background-image: var(--bg-image);
                                        background-position: center center;
                                        background-size: cover;
                                        background-repeat: no-repeat;

                                        opacity: 0;
                                        transform: translateY(-20px);
                                        animation: rmc-card-slide-down 500ms ease-out forwards;
                                    }

                                    /* =========================
                                       STAGGERED ANIMATION
                                    ========================= */
                                    .big-card:nth-child(2) {
                                        animation-delay: 200ms;
                                    }
                                    .big-card:nth-child(3) {
                                        animation-delay: 350ms;
                                    }
                                    .big-card:nth-child(4) {
                                        animation-delay: 500ms;
                                    }

                                    /* =========================
                                       CARD OVERLAY
                                    ========================= */
                                    .big-card__overlay {
                                        position: absolute;
                                        inset: 0;
                                        background-color: var(--overlay-color, rgba(0,0,0,0.4));
                                        opacity: var(--overlay-opacity, 1);
                                        z-index: 1;
                                        pointer-events: none;
                                    }

                                    /* =========================
                                       CARD CONTENT
                                    ========================= */
                                    .big-card__content {
                                        position: relative;
                                        z-index: 2;
                                        padding: 25px;
                                        text-align: center;
                                    }

                                    .big-card__content > .card-item {
                                        max-width: inherit !important;
                                    }

                                    /* =========================
                                       CARD HOVER
                                    ========================= */
                                    .big-card:hover {
                                        box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
                                    }

                                    /* =========================
                                       CTA-AREA WRAPPER
                                    ========================= */
                                    .cta-area {
                                        display: flex;
                                        justify-content: center;
                                        flex-wrap: wrap;
                                        gap: 10px;
                                    }

                                    /* =========================
                                       BUTTON
                                    ========================= */
                                    .card-btn {
                                        padding: 10px 20px;
                                        cursor: pointer;
                                        transition: 0.3s ease;
                                        border: none;
                                    }

                                    /* =========================
                                       BUTTON TEXT
                                    ========================= */
                                    .card-btn-text {
                                        line-height: 1.2;
                                    }

                                    /* =========================
                                       ANIMATION KEYFRAMES
                                    ========================= */
                                    @keyframes rmc-card-slide-down {
                                        from {
                                            opacity: 0;
                                            transform: translateY(-20px);
                                        }
                                        to {
                                            opacity: 1;
                                            transform: translateY(0);
                                        }
                                    }

                                    /* =========================
                                       RESPONSIVE
                                    ========================= */
                                    @media (max-width: 420px) {
                                        .card-grid {
                                            grid-template-columns: 1fr;
                                        }

                                        .big-card {
                                            max-width: 100%;
                                        }
                                    }