/* #region Case study cards */

.weightedfeaturelayout--casecards {
    min-height: 21.5rem;
}

.weightedfeaturelayout--casecards .weightedfeaturelayout__card--primary {
    gap: 1.5rem;
    padding-bottom: calc(var(--gap-m) - 1rem);
    transition-property: border-color;
    transition-duration: 0.24s;
}

.weightedfeaturelayout--casecards .weightedfeaturelayout__actions {
    margin-top: 0;
}

.casepanelayout__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-s);
    margin-top: auto;
    width: 100%;
}

.casepanelayout__lozenge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    padding: 0 0.75rem;
    border-radius: 999rem;
    background-color: var(--edge-darken-2);
    color: var(--white);
    font-weight: var(--smallcaps-fontweight);
    white-space: nowrap;
    flex: 0 0 auto;
}

.casepanelayout__logo--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 20%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}

.casepanelayout__logo--centered-large {
    width: 30%;
    height: 30%;
}

.casepanelayout__logo--centered .casepanelayout__logoimage {
    object-position: center center;
}

.customerstoryaside__logo {
    background-color: var(--plum);
    -webkit-mask-image: var(--customerstoryaside-logo-mask);
    mask-image: var(--customerstoryaside-logo-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.customerstoryaside__facts {
    display: grid;
    gap: 2rem;
    margin: 0;
}

.customerstoryaside__fact {
    display: grid;
    gap: 0;
}

.customerstoryaside__fact dt,
.customerstoryaside__fact dd {
    margin: 0;
    font-size: var(--bodytext-fontsize);
    line-height: var(--bodytext-lineheight);
    font-family: var(--bodytext-fontfamily);
    font-weight: var(--bodytext-fontweight);
    letter-spacing: var(--bodytext-letterspacing);
}

.customerstoryaside__fact dd {
    overflow-wrap: anywhere;
}

.customerstoryquote {
    margin: calc(var(--bodytext-lineheight) * 2) 0;
    padding: 1rem 3rem;
    border-left: 0.4rem solid var(--edge);
    color: var(--blue);
    font-style: normal;
}

.customerstoryquote p {
    margin: 0;
}

.customerstoryquote p + p {
    margin-top: var(--bodytext-lineheight);
    color: var(--blue);
    font-size: var(--bodytext-fontsize);
    line-height: var(--bodytext-lineheight);
    font-family: var(--bodytext-fontfamily);
    font-weight: var(--bodytext-fontweight);
    letter-spacing: var(--bodytext-letterspacing);
}

.customerstoryfeaturehighlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: calc(var(--bodytext-lineheight) * 2);

    @media (max-width: 42rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.article p + .customerstoryfeaturehighlights {
    margin-top: calc(var(--bodytext-lineheight) * 2);
}

.casestudymetricslayout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.casestudymetricslayout__cell {
    display: grid;
    place-items: center;
    padding: calc(var(--gap-m) * 0.85) var(--gap-m);
    text-align: center;
}

.casestudymetricslayout__cell + .casestudymetricslayout__cell {
    border-left: var(--border-width) solid var(--edge);
}

.casestudymetricslayout__copy {
    display: grid;
    justify-items: center;
    gap: calc(var(--gap-s) * 0.45);
}

@media (max-width: 50rem) {
    .casestudymetricslayout {
        grid-template-columns: 1fr;
    }

    .casestudymetricslayout__cell {
        padding: var(--gap-m) 0;
    }

    .casestudymetricslayout__cell + .casestudymetricslayout__cell {
        border-left: 0;
        border-top: var(--border-width) solid var(--edge);
    }
}

.weightedfeaturelayout--casecards .weightedfeaturelayout__card--primary:hover,
.weightedfeaturelayout--casecards .weightedfeaturelayout__card--primary:focus-within {
    border-color: var(--edge-darken-1);
}

.weightedfeaturelayout--casecards .weightedfeaturelayout__card--primary:hover .weightedfeaturelayout__actions .button,
.weightedfeaturelayout--casecards .weightedfeaturelayout__card--primary:focus-within .weightedfeaturelayout__actions .button {
    color: var(--blue);
}

/* #endregion */