.flex-layout.mira_content_d1-layout {
    --inactive-bg: var(--color-white);
    --inactive-border: rgba(10, 10, 68, 0.12);
    --active-bg: var(--color-midnight-blue);
    --active-text: var(--color-icy-white);
    --icon-inactive-bg: var(--color-midnight-blue);
    --icon-active-bg: var(--color-bright-yellow);
    --progress-bg: rgba(255, 255, 255, 0.2);
    --progress-thumb: var(--color-bright-yellow);
    --foldout-duration: 300ms;
    padding-block: var(--row-padding-top) var(--row-padding-bottom);
}

.flex-layout.mira_content_d1-layout .intro-header {
    align-items: end;
    margin-bottom: max(2rem, calc(2 * var(--su)));
}

.flex-layout.mira_content_d1-layout .intro-right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.flex-layout.mira_content_d1-layout .intro-tekst {
    margin-top: max(1rem, calc(1 * var(--su)));
}

.flex-layout.mira_content_d1-layout .intro-tekst p {
  margin-bottom: 0;
}

.flex-layout.mira_content_d1-layout .item-container {
    gap: max(1.5rem, calc(1 * var(--su)));
    align-items: stretch;
}

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

.flex-layout.mira_content_d1-layout .items .item {
border-radius: 16px 0 16px 16px;
    padding: max(1.75rem, calc(1.25 * var(--su)));
    background-color: var(--inactive-bg);
    border: 1px solid var(--inactive-border);
    cursor: pointer;
    transition:
        background-color var(--foldout-duration) ease-in-out,
        border-color var(--foldout-duration) ease-in-out;
}

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

.flex-layout.mira_content_d1-layout .item h4.item-title {
    display: flex;
    align-items: center;
    gap: max(0.75rem, calc(0.75 * var(--su)));
    margin: 0;
    color: var(--color-midnight-blue);
    transition: color var(--foldout-duration) ease-in-out;
}

.flex-layout.mira_content_d1-layout .item.active h4.item-title {
    color: var(--active-text);
    text-transform: uppercase;
}

.flex-layout.mira_content_d1-layout .solution-icon {
    flex-shrink: 0;
    width: max(2.25rem, calc(2.25 * var(--su)));
    height: max(2.25rem, calc(2.25 * var(--su)));
    background-color: var(--icon-inactive-bg);
    border-radius: 2.737px 0 2.737px 2.737px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--foldout-duration) ease-in-out,
        color var(--foldout-duration) ease-in-out;
    overflow: hidden;
    color: var(--color-white);
}

.flex-layout.mira_content_d1-layout .item.active .solution-icon {
    background-color: var(--icon-active-bg);
    color: var(--color-midnight-blue);
}

.flex-layout.mira_content_d1-layout .solution-icon svg {
    width: 60%;
    height: 60%;
    display: block;
    overflow: visible;
}

.flex-layout.mira_content_d1-layout .solution-icon svg,
.flex-layout.mira_content_d1-layout .solution-icon svg * {
    fill: currentColor;
}

.flex-layout.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;
}

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

.flex-layout.mira_content_d1-layout .item .content-wrapper {
    overflow: hidden;
    color: var(--active-text);
}

.flex-layout.mira_content_d1-layout .item .content-wrapper p {
    margin-bottom: max(2rem, calc(1 * var(--su)));
    font-size: var(--desktop-body-md);
}

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

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

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

.flex-layout.mira_content_d1-layout .images {
    border-radius: 16px 0 16px 16px;
    overflow: clip;
    position: relative;
    align-self: stretch;
}

.flex-layout.mira_content_d1-layout .post-wrapper {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--foldout-duration) ease-in-out;
    pointer-events: none;
}

.flex-layout.mira_content_d1-layout .post-wrapper.active {
    opacity: 1;
    pointer-events: auto;
}

.flex-layout.mira_content_d1-layout .post-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flex-layout.mira_content_d1-layout .post-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 68, 0.75) 0%, transparent 55%);
    pointer-events: none;
}

.flex-layout.mira_content_d1-layout .post-wrapper .content-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: max(1.5rem, calc(1.5 * var(--su)));
    display: flex;
    flex-direction: column;
    gap: max(0.75rem, calc(0.75 * var(--su)));
    z-index: 1;
}

.flex-layout.mira_content_d1-layout .labels {
    display: flex;
    flex-wrap: wrap;
    gap: max(0.375rem, calc(0.375 * var(--su)));
}

.flex-layout.mira_content_d1-layout .ensivia-label {
    display: inline-block;
    background-color: var(--color-white);
    color: var(--color-midnight-blue);
    font-size: max(0.725rem, calc(0.875 * var(--su)));
    font-weight: 700;
    line-height: 1;
    padding: max(0.375rem, calc(0.375 * var(--su))) max(0.625rem, calc(0.625 * var(--su)));
    border-radius: 4px 0 4px 4px;
    text-transform: uppercase;
    font-family: "korolev", sans-serif;
}

.flex-layout.mira_content_d1-layout .item-image-title {
    color: var(--color-icy-white);
    margin: 0;
    max-width:510px;
    text-transform: uppercase;
}

@media only screen and (max-width: 992px) {
    .flex-layout.mira_content_d1-layout .item-container {
        flex-direction: column;
    }

    .flex-layout.mira_content_d1-layout .images {
        order: -1;
        aspect-ratio: 16/9;
    }
}