.text-media.layout-full-width .info.bg-dark-green {
    background-color: var(--dark-green);
}

.text-media.layout-full-width .info.bg-creme {
    background-color: var(--creme);
}

.text-media.layout-full-width .info.bg-creme-green {
    background-color: var(--creme-green);
}

.text-media.layout-boxed.bg-dark-green {
    background-color: var(--dark-green);
}

.text-media.layout-boxed.bg-creme {
    background-color: var(--creme);
}

.text-media.layout-boxed.bg-creme-green {
    background-color: var(--creme-green);
}

.text-media .info.bg-dark-green h2, .text-media.bg-dark-green .info h2 {
    color: var(--creme);
}

.text-media .info.bg-dark-green .content *, .text-media.bg-dark-green .info .content * {
    color: var(--light-body-text);
}

.text-media .info .content *:last-child {
    margin-bottom: 0;
}

.text-media .info .content ul li {
    margin-bottom: 10px;
    padding-left: 10px;
}

.text-media .info .content.style-arrow ul {
    margin-left: 17px;
}

.text-media .info .content.style-arrow ul li {
    list-style-image: url("images/arrow.svg");
}

.text-media .info .content.style-checkmark ul li {
    list-style-image: url("images/checkmark.svg");
}

.text-media .boxed {
    display: flex;
}

.text-media .boxed .media img {
    border-radius: 8px;
}

.text-media.layout-boxed .boxed {
    gap: 50px;
}

.text-media.layout-boxed .boxed .media img {
    width: 100%;
}

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

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

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

.text-media.layout-full-width {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: 100%;
}

.text-media.layout-full-width > div {
    flex: 1;
}

.text-media.layout-full-width .info > div {
    max-width: 46rem;
}

.text-media.layout-full-width .media {
    max-width: none;
}

.text-media .info {
    display: flex;
    align-items: center;
}

.text-media.layout-full-width.image-right .info {
    width: 100%;
}

.text-media.layout-full-width.image-right .info > div {
    margin-left: auto;
}

.text-media.layout-full-width.image-left .info {
    margin-right: auto;
    width: 100%;
}

.text-media.layout-full-width.image-right .info {
    order: 1;
}

.text-media.layout-full-width.image-right .media {
    order: 2;
}

.text-media.layout-full-width.image-left .info {
    order: 2;
}

.text-media.layout-full-width.image-left .media {
    order: 1;
}

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

.text-media.layout-full-width .media iframe {
    height: 100%;
}

.text-media.layout-full-width.image-left .info > div {
    padding: 80px 0 80px 80px;
}

.text-media .info .btn-group {
    padding-top: 20px;
}

.text-media.layout-full-width.image-right .info > div {
    padding: 80px 80px 80px 0;
}

.text-media .info > .items .item:not(:last-child) {
    margin-bottom: 45px;
}


@media (max-width: 1600px) {
    .text-media.layout-full-width.image-left .info > div {
        padding: 50px 20px 50px 80px;
    }

    .text-media.layout-full-width.image-right .info > div {
        padding: 50px 80px 50px 20px;
    }
}


@media (max-width: 1250px) {
    .text-media.layout-full-width.image-left {
        padding-left: 20px;
    }

    .text-media.layout-full-width.image-right {
        padding-right: 20px;
    }
}

@media (max-width: 960px) {
    .text-media.layout-full-width {
        display: flex;
        padding: 50px 20px;
    }

    .text-media.layout-full-width.image-right {
        flex-direction: column;
    }

    .text-media.layout-full-width.image-left {
        flex-direction: column-reverse;
    }

    .text-media.layout-full-width .media, .text-media.layout-full-width .info > div {
        max-width: 100%;
    }

    .text-media.layout-full-width .media img {
        width: 100%;
    }

    .text-media.layout-full-width.image-left .media, .text-media.layout-full-width.image-right .info > div {
        margin-left: 0;
    }

    .text-media.layout-full-width.image-left .info > div {
        padding: 50px 20px 50px 20px;
    }

    .text-media.layout-full-width.image-right .info > div {
        padding: 50px 20px 50px 20px;
    }
}

@media (max-width: 900px) {
    .text-media .boxed.image-right {
        flex-direction: column;
    }

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


@media (max-width: 790px) {
    .text-media.layout-full-width .media iframe {
        min-height: 250px;
    }
}