.flex-content.text-with-media {
    padding:4rem 0;
    overflow: clip;
}

.flex-content.text-with-media .text > *:last-child {
    margin-bottom: 0;
}
.flex-content.text-with-media .text ol {
    counter-reset: section;
    list-style: none;
    padding: 0;
}
.flex-content.text-with-media .text ol > li {
    position: relative;
    padding-left: 3.5rem;
}
.flex-content.text-with-media .text ol > li:not(:last-child) {
    margin-bottom: 1.5rem;
}
.flex-content.text-with-media .text ol > li::before {
    counter-increment: section;
    content: counter(section);
    display: block;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: #FFF;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
}

.flex-content.text-with-media .cta {
    padding-top: 30px;
}

.flex-content.text-with-media .media-col img {
    position: relative;
    width: 100%;
}

.flex-content.text-with-media .full-width-image .media-col img {
    left: calc(-1 * ((100dvw - (1320px - var(--bs-gutter-x))) / 2));
    width: calc(100% + ((100dvw - (1320px - var(--bs-gutter-x))) / 2));
    max-width: unset;
}

.flex-content.text-with-media .row:not(.full-width-image) .media-col img {
    border-radius: var(--bs-border-radius-xl);
}

.flex-content.text-with-media .full-width-image.flip .media-col img {
    left: auto;
}

@media only screen and (max-width: 1399px) {
    .flex-content.text-with-media .full-width-image .media-col img {
        left: calc(-1 * ((100dvw - (1140px - var(--bs-gutter-x))) / 2));
        width: calc(100% + ((100dvw - (1140px - var(--bs-gutter-x))) / 2));
    }
}

@media only screen and (max-width: 1199px) {
    .flex-content.text-with-media .full-width-image .media-col img {
        left: calc(-1 * ((100dvw - (960px - var(--bs-gutter-x))) / 2));
        width: calc(100% + ((100dvw - (960px - var(--bs-gutter-x))) / 2));
    }
}

@media only screen and (max-width: 991px) {
    .flex-content.text-with-media .full-width-image .media-col img {
        left: auto;
        width: 100%;
        margin: 0 0 30px;
    }
}

@media (max-width: 575px) {
    .flex-content.text-with-media {
        padding: 3rem 0;
    }
}