.flex-layout.mira_accordion_b1-layout{
    --transition-duration: 300ms;

    --counter-bg: #fff;
    --counter-border: 1px solid hsla(0, 0%, 11%, 0.1);
    --counter-icon-bg: var(--black-60);

    --item-bg: transparent;
    --item-active-bg: #fff;
}

.flex-layout.mira_accordion_b1-layout .image{
    position: relative;
    overflow: visible;
}

.flex-layout.mira_accordion_b1-layout .image-wrapper{
    aspect-ratio: 1;
    position: relative;
    border-radius: max(.5rem, calc(.5 * var(--su)));
    isolation: isolate;
    overflow: clip;
}

.flex-layout.mira_accordion_b1-layout .image .counter{
    position: absolute;
    bottom: 0; left: max(2rem, calc(4 * var(--su)));
    transform: translateY(50%);
    padding: max(1rem, calc(1 * var(--su))) max(1.5rem, calc(1.5 * var(--su)));
    background-color: var(--counter-bg);
    border: var(--counter-border);
    border-radius: max(.5rem, calc(.5 * var(--su)));
}

.flex-layout.mira_accordion_b1-layout .counter .number{
    position: relative;
    width: fit-content;
    font-size: var(--scaling-h2);
    font-weight: var(--pk-heading-font-weight);
}

.flex-layout.mira_accordion_b1-layout .counter .number::after{
    content: '';
    width: .5em; height: .5em;
    border-radius: 50%;
    background-color: var(--counter-icon-bg);
    position: absolute;
    left: 100%;
    top: 0;
}

.flex-layout.mira_accordion_b1-layout .counter .subtitle{
    font-size: var(--desktop-body-sm);
    max-width: max(11.5rem, calc(11.5 * var(--su)));
    display: block;
}

.flex-layout.mira_accordion_b1-layout .image-wrapper img{
    position: absolute;
    z-index: 0;
    object-fit: cover;
    width: 100%; height: 100%;
}


.flex-layout.mira_accordion_b1-layout .content .pk-subtitle{
    font-size: var(--pk-desktop-body-md);
    font-weight: var(--pk-heading-font-weight);
    margin-bottom: max(.5rem, calc(.5 * var(--su)));
}

.flex-layout.mira_accordion_b1-layout .content .pk-heading{
    margin-bottom: max(1.5rem, calc(2 * var(--su)));
}

.flex-layout.mira_accordion_b1-layout .content .pk-accordion-item{
    padding: max(1.5rem, calc(2 * var(--su))) max(1rem, calc(2.5 * var(--su)));
    border-radius: max(.5rem, calc(.5 * var(--su)));
    background-color: var(--item-bg);
    transition: background-color var(--transition-duration) ease-in-out;
}

.flex-layout.mira_accordion_b1-layout .content .pk-accordion-item.active{
    background-color: var(--item-active-bg);
}

.mira_accordion_b1-layout .pk-accordion-item .pk-accordion-item-content {
	display: grid;
	grid-template-rows: 0fr;
    opacity: 0;
	transition: grid-template-rows var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out;
}

.mira_accordion_b1-layout .pk-accordion-item.active .pk-accordion-item-content {
    
    opacity: 1;
	grid-template-rows: 1fr;
}

.mira_accordion_b1-layout .pk-accordion-item .pk-accordion-content-wrapper {
	overflow: hidden;
}

.mira_accordion_b1-layout .pk-accordion-item .pk-accordion-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(1 * var(--su));

	user-select: none;
    cursor: pointer;
    transition: padding-bottom var(--transition-duration) ease-in-out;
}

.mira_accordion_b1-layout .pk-accordion-item.active .pk-accordion-item-head {
    padding-bottom: max(1rem, calc(1 * var(--su)));
}

.mira_accordion_b1-layout .pk-accordion-item .pk-accordion-title{
    margin-bottom: 0;
    display: flex;
    align-items: start;
    gap: max(1rem, calc(1 * var(--su)));
}

.mira_accordion_b1-layout .pk-accordion-item .pk-accordion-title span{
    font-size: 1em;
    line-height: inherit;
}


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

    .flex-layout.mira_accordion_b1-layout .content{
        order: 1
    }

    .flex-layout.mira_accordion_b1-layout .image{
        order: 2;
    }
}
