.td {


    @each $color, $value in $theme-colors {
        &.#{$color} {
            .td__title{
                h1,h2,h3,h4, strong {color: $value}
            }

            .list-links {
                li a::after {
                    color: $value;
                }
            }

        }

        &.text--#{$color} {
            h1,h2,h3,h4, strong {color: $value}
        }
    }

    &__title {
        .center & {
            text-align: center;
        }
    }

    &.center {
        .header {
            text-align: center;
        }
    }

    &.muted {
        * {
            color: $text-muted;
        }
    }

    .photo-left,
    .photo_left {
        float: left;
        margin: 0 map-get($spacers, 2) map-get($spacers, 2) 0;
    }

    .photo-right,
    .photo_right {
        float: right;
        margin: 0 0 map-get($spacers, 2) map-get($spacers, 2);
    }

    .photo-wide,
    .photo_wide,
    .video_wide {
        text-align: center;
        border: {
            style: solid;
            color: $border-color;
            width: 1px;
        };
        display: block;
        width: 90%;
        margin: map-get($spacers, 2) auto;
        padding: map-get($spacers, 2);
    }

    blockquote {
        background: {
            color: rgba($primary, .2);
        }

        border-left: 5px solid $primary;
        margin: map-get($spacers, 4) 0;
        padding: map-get($spacers, 4);
    }
}



@include media-breakpoint-up(lg) {
    .td {
        .actions {
            .btn + .btn {
                margin-left: map-get($spacers, 2);
            }
        }
    }
}

@include media-breakpoint-down(md) {
    .td {
        &.text-center .actions {
            align-items: center;
        }

        .actions {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .actions .btn + .btn {
            margin-top: map-get($spacers, 3);
        }
    }
}