.multi-column-slice__header-container {
    margin-bottom: 2rem;
}

.multi-column-slice__items {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.multi-column-slice__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.multi-column-slice__item.multi-column-slice__item--left {
    text-align: left;
}

.multi-column-slice__item.multi-column-slice__item--right {
    text-align: right;
}

.multi-column-slice__item-image {
    align-self: end;
    width: 100%;
    max-width: 48rem;
    justify-self: center;
}

.multi-column-slice__item-heading {
    margin: 0;
}

.multi-column-slice__item-heading em {
    font-style: normal;
}

.multi-column-slice__header {
    margin: 0;
}

.multi-column-slice__header em {
    font-style: normal;
}

.multi-column-slice__header.multi-column-slice__header--title p {
    font-size: 1.5rem;
    line-height: calc(32 / 24);
    margin-bottom: .5rem;
}

.multi-column-slice__header.multi-column-slice__header--subtitle {
    font-size: 1rem;
    line-height: 1.5;
}

.multi-column-slice__header.multi-column-slice__header--left {
    text-align: center;
    justify-items: center;
}

.multi-column-slice__header.multi-column-slice__header--right {
    text-align: center;
    justify-items: center;
}

.multi-column-slice__header.multi-column-slice__header--center {
    text-align: center;
    justify-items: center;
}

.multi-column-slice__item-body p {
    margin-bottom: 0;
}

.multi-column-slice__item-button.multi-column-slice__item-button--primary,
.multi-column-slice__item-button.multi-column-slice__item-button--secondary {
    margin-top: 1rem;
    display: inline-flex;
}

@media (min-width: 813px) {
    .multi-column-slice {
        /* These styles allow the component to be 1080px wide while still being centered and without */
        /* having to modify the `.page__row` styling. Once all content pages have been updated to use */
        /* the new layout, this can be removed. */
        position: relative;
        width: calc(100vw - 4rem);
        max-width: 67.5rem;
        left: 50%;
        margin-left: max(-33.75rem , calc(-50vw + 2rem));
    }

    .multi-column-slice__items {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-rows: minmax(10px, 1fr) auto;
        align-items: start;
        gap: 0 2rem;
    }

    .multi-column-slice__item {
        display: grid;
        grid-row: 1/3;
        grid-template-rows: subgrid;
    }

    .multi-column-slice__item-image {
        grid-row: 1/2;
    }

    .multi-column-slice__item-image.multi-column-slice__item-image--left {
        justify-self: start;
    }

    .multi-column-slice__item-image.multi-column-slice__item-image--right {
        justify-self: end;
    }

    .multi-column-slice__item-image.multi-column-slice__item-image--center {
        justify-self: center;
    }

    .multi-column-slice__item-content {
        grid-row: 2/3;
        align-self: start;
    }

    .multi-column-slice__header.multi-column-slice__header--left {
        text-align: left;
        justify-items: start;
    }

    .multi-column-slice__header.multi-column-slice__header--right {
        text-align: right;
        justify-items: end;
    }

    .multi-column-slice__header.multi-column-slice__header--center {
        text-align: center;
        justify-items: center;
    }
}

.multi-column-slice__item-heading em,
.multi-column-slice__header em {
    padding: 0 .25rem;
    clip-path: polygon(
        .125rem 0,
        100% 0,
        calc(100% - .125rem) 100%,
        0 100%
    );
    color: #FFF;
}

.multi-column-slice__item-heading.multi-column-slice__item-heading--primary em,
.multi-column-slice__header.multi-column-slice__header--primary em {
    background-color: var(--primaryColor);
}

.multi-column-slice__item-heading.multi-column-slice__item-heading--secondary em,
.multi-column-slice__header.multi-column-slice__header--secondary em {
    background-color: var(--secondaryColor);
}