@layer components {
    .portfolio-analysis-upsell {
            align-items: center;
            display: grid;
            gap: 1.5rem;
        }

    .portfolio-analysis-upsell__copy {
            padding: 2.5rem var(--dashboard-section-padding-x);
        }

    .portfolio-analysis-upsell__icon {
            align-items: center;
            background: linear-gradient(to bottom left, #86efac, #fde047, #f9a8d4);
            border-radius: var(--dashboard-radius-pill);
            color: #ffffff;
            display: inline-flex;
            padding: 0.5rem;
        }

    .portfolio-analysis-upsell__icon i,
        .portfolio-analysis-upsell__icon svg {
            height: 1.5rem;
            width: 1.5rem;
        }

    .portfolio-analysis-upsell__title {
            color: var(--dashboard-color-text);
            font-size: 1.875rem;
            font-weight: 800;
            line-height: 1.2;
            margin-top: 1.25rem;
        }

    .portfolio-analysis-upsell__text {
            color: var(--dashboard-color-text-muted);
            font-size: 1.125rem;
            line-height: 1.5;
            margin-top: 0.5rem;
        }

    .portfolio-analysis-upsell__actions {
            margin-top: 1.25rem;
        }

    .portfolio-analysis-upsell__media {
            padding: 0 var(--dashboard-section-padding-x) var(--dashboard-section-padding-y-lg);
        }

    .portfolio-analysis-upsell__image {
            border: 1px solid var(--dashboard-color-border);
            width: 100%;
        }

    @media (min-width: 48rem) {
        .portfolio-analysis-upsell {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    place-items: center;
                }
    }

    @media (min-width: 48rem) {
        .portfolio-analysis-upsell__copy {
                    padding: 2.5rem var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .portfolio-analysis-upsell__media {
                    padding: 3rem var(--dashboard-section-padding-x-lg) var(--dashboard-section-padding-y-lg) 0;
                }
    }
}