.section-campaign-text-media-cta {
    padding: 4rem 1.5rem;
}

.media-container {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;

    &.img-left {
        flex-direction: column-reverse;
    }

    .text-section {
        a:link.cta-button-arrow-pill {
            background: transparent;
            border: 2px solid var(--color-petrol);
            font-size: var(--14px);
        }
    }

    .image-section {
        align-self: center;

        &.img-hide {
            display: none;
        }
    }
}

@media screen and (min-width: 768px) {
    .section-campaign-text-media-cta {
        padding: 2.75rem;
    }
}

@media screen and (min-width: 992px) {
    .section-campaign-text-media-cta {
        padding: 1.5rem 8.3rem;
    }

    .media-container {
        flex-direction: row;
        gap: 1.5rem;

        &.img-left {
            flex-direction: row-reverse;
        }

        .text-section {
            flex: auto;

            &.img-fluid {
                width: 75%;
            }
        }

        .image-section {
            align-self: flex-start;
            flex: none;

            &.img-hide {
                display: block;
            }
            &.img-fluid {
                flex: auto;
            }
        }
    }
}

@media screen and (min-width: 1200px) {
    .section-campaign-text-media-cta {
        padding: 3.5rem 10.75rem;
    }

    .media-container {
        
        .text-section {
            &.img-fluid {
                width: auto;
            }
        }

        .image-section {
            &.img-fluid {
                flex: none;
            }
        }
    }
}