.callout-slice {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 2rem;
}

.callout-slice__image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 6.25rem;
}

.callout-slice__body ul, ol {
    list-style: revert;
}

@media (min-width: 813px) {
    .callout-slice {
        flex-direction: row;

        /* 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));
    }

    .callout-slice__image {
        margin-left: 0;
        margin-right: 0;
    }

    .callout-slice__content {
        padding-left: 0;
    }
}

.callout-slice {
    background: var(--secondaryColorLight);
    border-radius: var(--borderRadius);
}

@media (min-width: 813px) {
    .callout-slice::after {
        left: -1rem;
        top: -1.5rem;
        width: 80%;
        height: calc(100% + 3rem);
    }
}