@layer components {
    .upgrade-feature {
            border-bottom: 1px solid var(--dashboard-color-border);
            display: grid;
            gap: 0.75rem;
            padding: 1.25rem var(--dashboard-section-padding-x);
        }

    .upgrade-feature:last-child {
            border-bottom: 0;
        }

    .upgrade-feature__top {
            align-items: center;
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
        }

    .upgrade-feature__icon {
            align-items: center;
            background: rgb(var(--dashboard-color-brand-rgb) / 0.1);
            border-radius: var(--dashboard-radius-pill);
            color: var(--dashboard-color-brand);
            display: inline-flex;
            height: 2.5rem;
            justify-content: center;
            width: 2.5rem;
        }

    .upgrade-feature__icon i,
        .upgrade-feature__icon svg {
            height: 1.25rem;
            width: 1.25rem;
        }

    .upgrade-feature__title {
            color: var(--dashboard-color-text);
            font-size: 1rem;
            font-weight: 750;
            line-height: 1.3;
        }

    .upgrade-feature__copy {
            color: var(--dashboard-color-text-muted);
            font-size: 0.9375rem;
            line-height: 1.5;
        }

    @media (min-width: 48rem) {
        .upgrade-feature {
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .upgrade-feature:nth-child(odd) {
                    border-right: 1px solid var(--dashboard-color-border);
                }
    }

    @media (min-width: 48rem) {
        .upgrade-feature:nth-last-child(-n + 2) {
                    border-bottom: 0;
                }
    }
}