.table-tiers {
    .container{ 
        padding-left: var(--sideGap);
        padding-right: var(--sideGap);
        --container-width: inherit;
        max-width: none !important;
    }
    .headings {
        display: flex;
        flex-direction: column;
        align-items: center;
        h2 {
            font-size: 2.25rem;
            font-weight: 500;
        }
        .heading-title {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.8rem;
            gap: 1rem;
            .icon-wrap {
                background: #E8EDF1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 3.75rem;
                height: 3.75rem;
                border-radius: 1rem;
                img {
                    width: 48px;
                    height: 48px;
                }
            }
            @media (max-width: 768px) {
                flex-direction: column;
                text-align: center;
            }
        }
        &.left {
            .heading-title {
                h2 {
                    margin: 0;
                }
            }
        }
        &.above {
            .heading-title {
                flex-direction: column;
                h2 {
                    margin: 0;
                }
            }
        }
        .heading-desc {
            text-align: center;
            p {
                font-weight: 300;
                font-size: 1.125rem;
            }
            ul.heading-list {
                list-style: none;
                display: flex;
                max-width: 75%;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                margin: 1rem auto 3rem;
                column-gap: 2.75rem;
                row-gap: 0.875rem;
                padding: 0;
                li {
                    display: flex;
                    align-items: center;
                    gap: 0.438rem;
                    padding: 0;
                    font-weight: 400;
                    img {
                        width: 24px;
                        height: 24px;
                    }
                }
            }
        }
    }

    
    .tiers-content {
         @media (min-width: 768px) {
            padding-left: 4rem;
            padding-right: 4rem;
        }
        .tier-item {
            display: flex;
            position: relative;
            margin-bottom: 1.4rem;
            column-gap: 1.5rem;
            &::before {
                content: "";
                position: absolute;
                width: 2px;
                top: 0;
                left: 23px;
                height: calc(50% - 2.2rem);
                background: linear-gradient(190deg, rgba(224, 231, 235, 0.00) 0%, #E0E7EB 83.33%);
            }
            &::after {
                content: "";
                position: absolute;
                width: 2px;
                bottom: 0;
                left: 23px;
                height: calc(50% - 2.2rem);
                background: linear-gradient(360deg, rgba(224, 231, 235, 0.00) 0%, #E0E7EB 83.33%);
            }
            .icon-plus {
                border: solid 1px #E0E7EB;
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                display: flex;
                align-self: center;
                flex-shrink: 0;
                span {
                    color: #ADAFB2;
                    font-size: 2rem;
                    font-weight: 300;
                }
            }
            
            .tier-wrapper{
                border-radius: 0.75rem;
                border: 1px solid rgba(33, 82, 115, 0.16);
                width: 100%;
                padding: 1.75rem 1.85rem;
                display: flex;
                gap: 1.2rem;
                @media (max-width: 768px) {
                    flex-direction: column;
                }
                .tier-icon {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    line-height: 0;
                    border-radius: 0.875rem;
                    border: 1px solid rgba(255, 255, 255, 0.20);
                    background: linear-gradient(38deg, #215273 -1.81%, #00A398 151.16%);
                    box-shadow: 0 0 10px 0 rgba(0, 163, 152, 0.35), 0 1px 1.5px 0 rgba(33, 82, 115, 0.20), 0 4px 6px 0 rgba(255, 255, 255, 0.20) inset;
                    height: 3.125rem;
                    width: 3.125rem;
                }
                .tier-desc {
                    h3 {
                        color: #343A40;
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 500;
                        margin-bottom: 0.3rem;
                    }
                    ul {
                            list-style: none;
                            padding-left: 0;
                            font-weight: 300;
                            margin-bottom: 0;
                        li {
                            position: relative;
                            padding: 0.6rem 2rem 0.6rem 2.3rem;
                            font-weight: 400;
                            font-size: 1rem;
                            &::before {
                                content: "n";
                                font-family: "assent" !important;
                                position: absolute;
                                left: 0;
                                top: 50%;
                                transform: translateY(-50%); 
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 0.9rem;
                                color: #77797E;
                                background-color: #E7EAEB;
                                height: 1.5rem;
                                width: 1.5rem;
                                border-radius: 0.375rem;
                            }
                        }
                        &.inline {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0.5rem;
                            li {
                                width: auto; 
                            } 
                        }
                    }
                }
            }
        }
    }
}