.mira_content_d1-layout {
    --inactive-bg: white;
    --active-bg: #fafafb;
    --icon-inactive: var(--secondary-stone);
    --icon-active: var(--tertiary-coral);
    --progress-thumb: #000;

    --foldout-duration: 300ms;
    padding-block: max(4rem, calc(8.75 * var(--su)));
}

.mira_content_d1-layout.is-bg-wit {
    padding-block: 0;
    margin-block: max(4rem, calc(8.75 * var(--su)));
    background: var(--ex-white);
}

.mira_content_d1-layout.is-bg-lucht {
    background: var(--ex-lucht);
}

.mira_content_d1-layout.is-bg-offwhite {
    background: var(--ex-off-white);
}

.mira_content_d1-layout .item-container {
    gap: max(2rem, calc(4 * var(--su)));
}

.mira_content_d1-layout .buttons {
    display: flex;
    place-items: end;
    align-items: end;
    justify-content: end;
}

.mira_content_d1-layout .items {
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
}

.mira_content_d1-layout .items .item {
    border: 1px solid var(--ex-grey-blue-10);
    border-radius: max(1rem, calc(1 * var(--su)));
    padding: max(1.5rem, calc(1.5 * var(--su)));
    background-color: var(--inactive-bg);
    transition: background-color var(--foldout-duration) ease-in-out;
}

.mira_content_d1-layout .item .progress-bar {
    height: 1px;
    width: 100%;
    background-color: #D7D9DD;
    margin-top: max(1.5rem, calc(1.5 * var(--su)));
}

.mira_content_d1-layout .item .progress-bar .progress {
    background-color: var(--progress-thumb);
    height: 1px;
    width: 30%;
}

.mira_content_d1-layout .item.active {
    background-color: var(--active-bg);
}

.mira_content_d1-layout .item h4::before {
    content: "";
    width: max(0.5rem, calc(0.5 * var(--su)));
    height: max(0.5rem, calc(0.5 * var(--su)));
    border: 1px solid var(--ex-border);
    border-radius: 999px;
}

.mira_content_d1-layout .item h4 {
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--desktop-body-md);
    gap: max(0.5rem, calc(0.5 * var(--su)));
    line-height: 1;
    margin-bottom: 0;
}

.mira_content_d1-layout .item.item.active h4::before {
    content: "";
    border: 1px solid var(--ex-red);
    background: var(--ex-red);
}

.mira_content_d1-layout .item.active h4 {
    color: var(--ex-red);
}

.mira_content_d1-layout .item h4 .text {
    min-height: 1.25em;
    display: grid;
    align-items: center;
}

.mira_content_d1-layout .item .content {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows var(--foldout-duration) ease-in-out,
        margin-top var(--foldout-duration) ease-in-out;
}

.mira_content_d1-layout .item .content-wrapper {
    font-size: var(--desktop-body-xs);
    overflow: hidden;
    transition: margin-bottom var(--foldout-duration) ease-in-out;
}

.mira_content_d1-layout .item .content-wrapper p {
    margin-bottom: 0;
}

.mira_content_d1-layout .item.active .content {
    margin-top: max(0.5rem, calc(0.5 * var(--su)));
    grid-template-rows: 1fr;
}

.mira_content_d1-layout .item .content .pk-button-group {
    margin-block: max(1rem, calc(1 * var(--su))) 0;
}

.mira_content_d1-layout .item .content .pk-button-group .pk-button {
   width: 100%;
   justify-content: center;
}

.mira_content_d1-layout .images {
    display: grid;
    grid-template-areas: "stack";
    height: fit-content;
    overflow: clip;
}

.mira_content_d1-layout .images img {
    grid-area: stack;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 896/575;
    transition: opacity var(--foldout-duration) ease-in-out;
    border-radius: max(1.5rem, calc(1.5 * var(--su)));
}

.mira_content_d1-layout .video-embed {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: max(1.5rem, calc(1.5 * var(--su)));
    overflow: hidden;
}

.mira_content_d1-layout .images .video-embed {
    grid-area: stack;
    width: 100%;
    transition: opacity var(--foldout-duration) ease-in-out;
}

.mira_content_d1-layout .video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mira_content_d1-layout .video-embed__teaser {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mira_content_d1-layout .video-embed__play {
    position: absolute;
    bottom: max(2rem, calc(2 * var(--su)));
    left: max(2rem, calc(2 * var(--su)));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: max(1rem, calc(1 * var(--su)));
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
}

.mira_content_d1-layout .video-embed__play span {
    color: var(--ex-white);
    font-size: var(--desktop-body-md);
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.mira_content_d1-layout .video-embed__play::before {
    content: "\e037";
    font-family: "Material Symbols Outlined";
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(4rem, calc(4 * var(--su)));
    height: max(4rem, calc(4 * var(--su)));
    color: var(--ex-white);
    border-radius: 999px;
    background: var(--ex-red);
    font-size: max(2rem, calc(2 * var(--su)));
    transition: background-color 0.5s ease-in-out;
}

.mira_content_d1-layout .video-embed__play:hover::before {
    background: var(--ex-red-darker);
}

.mira_content_d1-layout .video-embed.is-playing .video-embed__play {
    display: none;
}

@media only screen and (min-width: 993px) {
    .mira_content_d1-layout .mobile-image {
        display: none;
    }

    .mira_content_d1-layout .items {
        position: sticky;
        top: max(6rem, calc(6 * var(--su)));
        align-self: start;
    }
}

@media only screen and (max-width: 992px) {
    .mira_content_d1-layout .buttons {
        place-items: start;
        align-items: start;
        justify-content: start;
        margin-top: max(1rem, calc(2 * var(--su)));
    }

    .mira_content_d1-layout .video-embed {
        aspect-ratio: 1/1;
    }

    .mira_content_d1-layout .images {
        display: none;
    }

    .mira_content_d1-layout .mobile-image {
        margin-top: max(1.5rem, calc(1.5 * var(--su)));
        border-radius: max(0.5rem, calc(0.5 * var(--su)));
        overflow: clip;
    }
}

@media only screen and (max-width: 767px) {
    .mira_content_d1-layout .video-embed,
    .mira_content_d1-layout .items .item {
        border-radius: max(0.5rem, calc(0.5 * var(--su)));
    }

    .mira_content_d1-layout .video-embed__play::before {
        width: max(2rem, calc(2 * var(--su)));
        height: max(2rem, calc(2 * var(--su)));
        font-size: max(1rem, calc(1 * var(--su)));
    }
}