.text-media .boxed {
    display: flex;
    gap: 40px;
}

.text-media .boxed > div {
    flex: 1;
}


.text-media .boxed.image-left {
    flex-direction: row;
}

.text-media .boxed.image-right {
    flex-direction: row-reverse;
}

.text-media .boxed:not(:has(.media.overlay)) {
    align-items: center;
}

.text-media .media img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.text-media .overlay {
    position: relative;
    display: inline-block;
}

.text-media .media.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent url("../../images/wave-left.png") no-repeat left center;
    background-size: contain;
}

.text-media .image-right .media.overlay::after {
    transform: scaleX(-1);
}




.text-media .boxed.image-left .media {
    text-align: right;
}

.text-media .boxed.image-right .media {
    text-align: left;
}



.text-media .boxed .content {
    display: flex;
    flex-direction: column;
}

.text-media .content.bg-pink, .text-media .content.bg-green, .text-media .content.bg-primary {
    padding: 70px 90px;
}



@media (max-width: 1520px) {
    .text-media .boxed {
        gap: 3vw;
    }

    .text-media .content.bg-pink, .text-media .content.bg-green {
        padding: 2vw 3vw;
    }

}


@media only screen and (max-width: 768px) {

    .text-media .boxed.image-left, .text-media .boxed.image-right {
        flex-direction: column;
    }

    .text-media .boxed {
        gap: 25px;
    }
    .text-media .content.bg-pink, .text-media .content.bg-green {
        padding: 40px 30px;
    }
}