.accent-image {
    padding: $block-padding; 
    background-size: cover;

    .container {
        @include break(from-desktop) {
        display: flex;
        align-items: center;            
        }
    }

    &.align-right {
        @include break(from-desktop) {
            .accent {
                order: 1;
                padding-right: 0;
            }

            .content {
                padding-left: 0;
            }                
        }
    }

    &.align-left {
        @include break(from-desktop) {
            .accent {
                padding-left: 0;
            }

            .content {
                padding-right: 0;
            }            
        }
    }

    &.align-bottom {
        .container {
            display: block;
            text-align: center;
        }

        .accent {
            padding-top: 2rem;
            padding-bottom: 0;
            align-self: flex-end;
        }

        .content {
            padding-top: 5rem;
        }
    }

    .content,
    .accent {
        padding: 1rem;    
        @include break(from-desktop) {
        padding: 0 2rem;         
        }
    }

    .content {
        flex: 8;
    }

    .accent {
        flex: 4;
        text-align: center;
    }
    .accent-caption {
        @include font-size(16);
        opacity: 1;
        padding: .5em;
    }
    
    &.circle-image {
        &.image-size-large {
            .accent {
                img {
                    @include circle(200);
                    @include break(from-desktop-mid) {
                    @include circle(400);                    
                    }
                }
            }            
        }

        &.image-size-medium {
            .accent {
                img {
                    @include circle(200);
                    @include break(from-desktop-mid) {
                    @include circle(350);                    
                    }
                }
            }            
        }

        &.image-size-small {
            .accent {
                img {
                    @include circle(200);
                    @include break(from-desktop-mid) {
                    @include circle(300);                    
                    }
                }
            }            
        }
    }
}
