.flex-layout.mira_content_g1-layout{
    --item-container-bg: var(--stone-80);
}
.flex-layout.mira_content_g1-layout .pk-grid-container.item-container{
    background-color: var(--item-container-bg);
    padding: max(1.5rem, calc(6 * var(--su))) max(1.5rem, calc(3 * var(--su)));
    border-radius: max(.5rem, calc(0.5 * var(--su)));

    overflow: clip;
}

.flex-layout.mira_content_g1-layout .pk-grid-container.item-container .items{
    border-top: 1px solid currentColor;
    font-size: var(--desktop-body-xl);
    display: grid;
    grid-template-columns: 1fr 4fr 1fr 2fr 3fr 1fr;
    grid-template-areas: "indicator heading . subheading text highlight";
    padding-top: max(1rem, calc(1 * var(--su)));
}

.flex-layout.mira_content_g1-layout .pk-grid-container.item-container .items .headings span{
    transition: translate 300ms ease-in-out;
    /*height: fit-content;*/
}

.flex-layout.mira_content_g1-layout .pk-grid-container.item-container .items .headings span:has(~ .active){
    translate: 0 calc(-2 * var(--su)) !important;
} 

.flex-layout.mira_content_g1-layout .items .indicators{
    display: grid;
    grid-template-areas: "stack";
}

.flex-layout.mira_content_g1-layout .items .indicators span{
    display: block;
    grid-area: stack;
}

.flex-layout.mira_content_g1-layout .items .headings{
    display: grid;
    grid-template-areas: "stack";
    height: fit-content;
}

.flex-layout.mira_content_g1-layout .items .headings span{
    /*
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    */
    display: block;
    grid-area: stack;
}

.flex-layout.mira_content_g1-layout .subheadings{
    font-size: var(--desktop-body-xs);
    grid-area: subheading;
}

.flex-layout.mira_content_g1-layout .subheadings span{
    transition: opacity 300ms ease-in-out;
}

.flex-layout.mira_content_g1-layout .subheadings:has(.active) span:not(.active){
    opacity: .2;
}

.flex-layout.mira_content_g1-layout .items .text{
    grid-area: text;
}

.flex-layout.mira_content_g1-layout .items .item-text{
    /*
    overflow: hidden;
    height: 0;
    */
    grid-area: text;
    font-size: var(--desktop-body-xs);
}


@media only screen and (max-width: 992px){

    .flex-layout.mira_content_g1-layout .pk-grid-container.item-container .items{
        grid-template-areas: "indicator heading" ". subheading" ". text" ". highlight";
        grid-template-columns: 1fr 4fr;
    }

    .flex-layout.mira_content_g1-layout .items .headings{
        overflow: clip;
    }

    /*
    .flex-layout.mira_content_g1-layout .items .headings span{
        -webkit-line-clamp: unset;
    }
    */
}