.rishi-ad {
    &_card {
        margin: 0 0 30px;
        overflow: hidden;

        &-thumbnail {
            margin: 0 -24px;

            img {
                vertical-align: top;
                width: 100%;
                height: auto;
            }
        }

        &-body {
            padding: var(--padding, 30px);

            >* {
                &:not(.rishi-ad_card-header):not(:last-child) {
                    margin-bottom: 16px;
                }
            }

        }

        &-header {
            padding-block-end: var(--padding-bottom, 16px);
            margin-block-end: var(--margin-bottom, 16px);

            &.flex {
                justify-content: space-between;
                align-items: center;
            }

            &.has-border-b {
                border-bottom: $border;
            }
        }

        &-header:is(.fw-500) {
            .rishi-ad_card-title {
                font-weight: inherit;
            }
        }

        &-title {
            font-size: 20px;
            line-height: 1.4;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;

            .rishi-ad_icon {
                margin-right: 8px;
                font-size: 24px;
            }

            &-h2 {
                font-size: 34px;
                line-height: 1.235;
            }

            &-sidebar {
                font-size: 18px;
                line-height: 1.7;
            }
        }

        &-lg {
            .rishi-ad_card-body {
                border-radius: var(--radius, 10px);

            }
        }

        &-sm {
            .rishi-ad_card-body {
                padding: 24px 0;
            }
        }

        &-header+&-body,
        &-thumbnail+&-body {
            padding-top: 16px;
        }

        &.is-loading {
            @keyframes bgAnimate {
                0% {
                    background-position: 100% 50%;
                }

                50% {
                    background-position: 0% 50%;
                }

                100% {
                    background-position: 0% 50%;
                }
            }

            .rishi-ad_card-header,
            .rishi-ad_card-body {

                &::before,
                &::after {
                    display: block;
                    width: 100%;
                    height: 2em;
                    background: linear-gradient(-90deg, #d8d8d8, #ffffff, #d8d8d8);
                    background-size: 400% 400%;
                    background-position: 100% 50%;
                    border-radius: 4px;
                    animation: bgAnimate 2s linear infinite;
                }
            }

            .rishi-ad_card-header {
                padding-bottom: 0;
                border-bottom: none;

                &::before {
                    content: "";
                    max-width: 20em;
                }

                &::after {
                    content: "";
                    max-width: 50%;
                    height: 1em;
                    margin-top: 1em;
                }
            }

            .rishi-ad_card-body {
                &::before {
                    content: "";
                    height: 10em;
                }
            }
        }

        &-body.flex {
            flex-direction: column;
        }
    }
}

.rishi-left-card {
    display: grid;
    place-items: center;
    text-align: center;

    &>* {
        &:not(:last-child) {
            margin-bottom: clamp(32px, 5vw, 48px);
        }
    }

    &>img {
        filter: drop-shadow(0px 4px 12px rgba(29, 13, 13, 0.04));
        border-radius: 10px;
    }

    .rishi-section-header h2 {
        font-size: 34px;
        line-height: 1.235;
    }

    .rishi-section-content>* {
        &:not(:last-child) {
            margin-bottom: clamp(32px, 5vw, 48px);
        }
    }

    .rishi-para-content {
        font-size: 18px;
        line-height: 1.55;
        max-width: 630px;
    }

    p>a {
        color: $primaryColor;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}