.simplecontentcollectionblock {
    .basic > h2 {
        text-align: center;
        margin: 0 0 1rem 0;
        font-size: 1.8rem;
    }
}

.simplecontentcollection-numbers {
    ul.list {

        >li {
            background: #ffffffb3;
            border-radius: 10px;            
            padding: 1rem;

            @media (min-width:767px) {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                gap: .25rem .5rem;
            }
            
            .stat {
                font-size: 2.70rem;
                opacity: .65;
                font-weight: 800;
                
                @media (max-width:766px) {
                    margin-bottom: .4rem;
                    text-align:center;
                    line-height: 2.3rem;
                }
                @media (min-width:767px) {
                    align-items: flex-start;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    white-space: nowrap;                
                }
            }
            .teaser {
                line-height: 120%;

                @media (max-width:766px) {
                    text-align:center;
                }

                @media (min-width:767px) {
                    align-items: center;
                    display: flex;       
                    text-align: left;      
                }
            }

        }
    }
}

.simple-content-collection-accordion {
    ul.accordion-wrapper {
        list-style: none;
        margin-left:0;
        padding-left:0;
        background-image: url(/siteassets/admin/dash.svg);
        background-repeat: repeat-y;
        background-position: 194px 0;

        @media (max-width: 575px) {
            background-position: 25px 0;
        }

        li.accordion-item  {
                padding-bottom: .5rem;

            .heading {
                padding-bottom: .5rem;

                button {
                    display: grid;
                    grid-template-columns: 160px 40px auto;
                    gap: 0 .5rem;
                    border: 0;
                    background-color: transparent;
                    width: 100%;
                    align-items: center;

                    @media (max-width: 575px) {
                        grid-template-columns: 40px auto;
                        grid-template-rows: auto auto;
                    }

                    h3 {
                        display: flex;
                        justify-self: end;
                        color: var(--brand-color);
                        flex-basis: 9em;
                        flex-grow: 0;
                        flex-shrink: 0;
                        font-size: 1.2rem;
                        margin: 4px 0;

                        @media (max-width: 575px) {
                            grid-column: 2/3;
                            grid-row: 1/2;
                            justify-self: start;
                        }
                    }
                    .svg {
                        width: 33px;
                        height: 33px;
                        background: var(--orange-gradient);
                        border-radius: 100%;
                        color: var(--brand-color);
                        display: flex                        ;
                        flex-basis: 2em;
                        flex-grow: 0;
                        flex-shrink: 0;
                        justify-content: Center;
                        align-items: center;
                        transition: all .5sease-in-out;
                        z-index: 2;
                        justify-self: center;
                        transform: rotate(-90deg);
                        transform-origin: center;
                        
                        @media (max-width: 575px) {
                            grid-column: 1/2;
                            grid-row: 1/3;
                        }

                        svg {
                            color: var(--brand-color);
                            width: 1.3em;
                            height: 1.3em;
                            transition: all .5sease-in-out;
                            z-index: 2;
                        }
                        
                        
                    }
                    .teaser {
                        color: var(--dark);
                        font-size: 1.2rem;
                        justify-self: start;
                        font-weight: 700;
                        text-align: left;
                        
                        @media (max-width: 575px) {
                            grid-column: 2/3;
                            grid-row: 2/3;
                        }
                    }
                    &.expanded {
                        .svg  {
                            transform: rotate(0deg);
                            /* transform-box: fill-box; */
                            transform-origin: center;
                        }
                    }
                }
            }

            .accordion-panel {
                overflow: hidden;
                transition: max-height .5sease-in-out;
                max-height: 0px;
                display: grid;
                
                @media (min-width: 576px) {
                    grid-template-columns: 160px 40px auto;
                    gap: 0 .5rem;
                }

                &.show {
                    max-height: 9999px;
                    transition: max-height 1sease-in-out;
                }

                .content {
                    @media (min-width: 576px) {
                        grid-column: 3/4;
                    }
                    
                    @media (max-width: 575px) {
                        background-color: var(--lightest);
                        padding: .5em 0;
                    }

                }
            }

        }

    }
}

.simplecontentcollection-row {
    > h2, > h3 {
        text-align: center;
        margin-top: 0;
    }
    
    ul.list.card-grid {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        display: grid;
        gap: 1.5rem 1.5rem;
        width: 100%;
        max-with: 100%;
        margin: auto;
        grid-template-rows: auto;
        @media(min-width: 767px) {
            grid-template-columns: repeat(3, 1fr);
        }
        @media(max-width: 766px) {
            grid-template-columns: 1fr;
        }


        >li {
            background: var(--lightest);
            border-radius: 10px;            
            padding: 1rem;
            margin-bottom: 0;   

            h2, h3 {
                margin-top: 0;
            }

            .teaser > a {
                text-decoration: none;
                color: initial;
            }    

            &.haslink {

                &:hover, &:focus, &:active {
                    cursor: pointer;
                    box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
                }   
            }     
        }
    }
} 
.simplecontentcollection-row.bg-color-card.brand {
    background-color: var(--brand-color);
    > h2, > h3, .block-summary *:not(.bttn) {
        color: var(--lightest);
    }
    ul.list.card-grid > li.haslink {
        &:hover, &:focus, &:active {
            box-shadow: rgba(255, 255, 255, 0.75) 0px 5px 15px;
            margin: -8px 0 8px 0;
        } 
    }
}
.simplecontentcollection-row.bg-color-card.dark {
    background-color: var(--dark);
    > h2, > h3, .block-summary *:not(.bttn) {
        color: var(--lightest);
    }
    ul.list.card-grid > li.haslink {
        &:hover, &:focus, &:active {
            box-shadow: rgba(255, 255, 255, 0.75) 0px 5px 15px;
            margin: -8px 0 8px 0; 
        } 
    }
}
.simplecontentcollection-row.bg-color-card.darkest {
    background-color: var(--darkest);
    > h2, > h3, .block-summary *:not(.bttn) {
        color: var(--lightest);
    }    
    ul.list.card-grid > li.haslink {
        &:hover, &:focus, &:active {
            box-shadow: rgba(255, 255, 255, 0.75) 0px 5px 15px;
            margin: -8px 0 8px 0;
        } 
    }
}