.smart-thermostats {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    @media (min-width: 768px) {
        padding-left: var(--Padding-M);
        padding-right: var(--Padding-M);
    }
    .title {
        width: 100%;
        padding-left: var(--Padding-M);
        padding-right: var(--Padding-M);
        @media (min-width: 768px) {
            padding-left: unset;
            padding-right: unset;
        }
    }
    .st-tabs {
        width: 100%;
        overflow: hidden;
        nav {
            width: 100%;
            flex-wrap: nowrap;
            white-space: nowrap;
            overflow-x: scroll;
            @media (min-width: 768px) {
                overflow-x: unset;
            }
            .nav-link {
                border-radius: 1.5rem;
                padding: var(--Padding-XS) var(--Padding-S);
                font-variation-settings: 'wght' 580;
                color: var(--Almost-Black);
                margin-bottom: var(--Padding-S);
                font-size: var(--Heading-S);
                &:first-child {
                    margin-left: var(--Padding-M);
                    @media (min-width: 768px) {
                        margin-left: unset;
                    }
                }
                &:last-child {
                    margin-right: var(--Padding-M);
                    @media (min-width: 768px) {
                        margin-right: unset;
                    }
                }
                &.active {
                    color: var(--Teal);
                    background-color: #fff;
                }
                @media (min-width:768px) {
                    border-radius: 1.5rem 1.5rem 0 0;
                    flex: 1 1 auto;
                    text-align: center;
                    margin-bottom: 0;
                }
            }
        }
        .tab-content {
            padding-left: var(--Padding-M);
            padding-right: var(--Padding-M);
            @media (min-width: 768px) {
                padding-left: unset;
                padding-right: unset;
            }
            .tab-pane {
                background-color: #fff;
                width: 100%;
                padding: var(--Container-Padding);
                border-radius: 0 0 1.5rem 1.5rem;
                .models {
                    display: flex;
                    flex-direction: column;
                    gap: var(--Padding-S);
                    img {
                        max-width: 14.2rem;
                        width:100%;
                        margin: 0 auto;
                        display: block;
                        @media (min-width: 768px) {
                            max-width: unset;
                        }  
                    }
                    .content {
                        display:flex;
                        flex-direction: column;
                        gap: var(--Padding-XS);
                        padding: var(--Padding-XS) 0;
                        .model-toggle {
                            border:0;
                            background: unset;
                            align-self: flex-start;
                            padding: 0;
                            text-decoration: underline;
                            font-weight: 400;
                            font-variation-settings: 'wght' 390;
                            font-size: var(--Paragraph-S);
        
                        }
                        ul {
                            li {
                                margin-bottom: 0;
                            }
                        }
                    }
                    p {
                        margin-bottom: 0;
                    }
                }
            }
            
        }
    }
    
}