.pricing {
    --pricing-comment: #777;
    
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 1.5rem;


    .in-progress {
        color: var(--sl-red);
    }

    .comment {
        color: var(--pricing-comment);
    }

    .plan-not-ready {
        display: none;
    }

    .hidden {
        visibility: hidden;
    }

    .pricing-plans {
        li:has(.in-progress) {
            opacity: 0.5;
        }
    }

    .pricing-details {
        border-bottom: var(--sl-separator);
        margin-top: -1.5rem;
    }
    
    & > *:nth-child(odd) {
        border-right: var(--sl-separator);
    }

}