.text-media.bg-blue {
    background-color: #E8F2F1;
}

.text-media.bg-yellow {
    background-color: #FFFADF;
}

.text-media.bg-white {
    background-color: var(--pure-white);
}

.text-media .boxed {
    padding-top: 80px;
    padding-bottom: 140px;
    display: flex;
    gap: 190px;
}

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

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

.text-media .boxed .media {
    display: flex;
    justify-content: flex-end;
}

.text-media .boxed .media.gradient {
    position: relative;
}

.text-media .boxed .media.gradient::before {
    content: "";
    position: absolute;
    border-radius: 8px;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.94%, rgba(15, 79, 83, 0.70) 82.23%) no-repeat;
    z-index: 1;
    pointer-events: none;
}

.text-media .boxed .media.gradient img {
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
    position: relative;
}


.text-media .boxed .media img {
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 14 / 9;
}

.text-media .boxed .info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.text-media .boxed .info .content {
    margin-bottom: 45px;
}
.text-media .boxed .content a {
    color: var(--vibrant-orange);
}

.text-media .boxed .row {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.text-media .boxed .row img {
    max-width: 200px;
}

.text-media .boxed .row > .row-content > p {
    margin-bottom: 8px;
}

@media screen and (max-width: 1400px) {
    .text-media .boxed .row {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }
}

@media only screen and (max-width: 915px) {
    .text-media .boxed .content div > p > a {
        font-size: 18px;
    }
}

@media only screen and (max-width: 850px) {
    .text-media .boxed, .text-media .boxed.image-right  {
        flex-direction: column;
        padding-top: 80px;
        padding-bottom: 80px;
        gap: 80px;
    }
    .text-media .boxed .media {
        justify-content: center;
    }
}

@media only screen and (max-width: 660px) {
    .text-media .boxed {
        gap: 25px;
        padding-bottom: 50px;
        padding-top: 50px;
    }
}