// RESPONSIVE FLOATED IMAGES
// --------------------------------------------------------------------
// Breakpoint for floated images
$img-breakpoint:    768px;

%image-block {
    display: block;
    @include x-rem(margin, 1 0);
}

// For use with ProcessWire
@if $pw-img-classes {
    .align_left,
    .align_right {
        @extend %image-block;
    }
}

@media only screen and (min-width: $img-breakpoint) {
    %image-left {
        float: left;
        @include x-rem(margin, .25 1 .75 0);
    }

    %image-right {
        float: right;
        @include x-rem(margin, .25 0 .75 1);
    }

    @if $pw-img-classes {
        // For use with ProcessWire
        .align_left {
            @extend %image-left;
        }

        .align_right {
            @extend %image-right;
        }
    }
}

// Figures
figure {
    @include x-rem(margin, 1 0);
}

// Figures/images in MagnificPopup
.mfp-content figure {
    margin: 0;
}

// RESPONSIVE FLOATED IMAGES
// --------------------------------------------------------------------
// Breakpoint for floated images
$img-breakpoint:    768px !default;
// Margins for images
$img-margin:        1 0 !default;
$img-left-margin:   .25 1 .75 0 !default;
$img-right-margin:  .25 0 .75 1 !default;

%image-block {
    display: block;
    @include x-rem(margin, $img-margin);
}

// For use with ProcessWire
@if $pw-img-classes {
    .align_left,
    .align_right {
        @extend %image-block;
    }
}

@media only screen and (min-width: $img-breakpoint) {
    %image-left {
        float: left;
        @include x-rem(margin, $img-left-margin);
    }

    %image-right {
        float: right;
        @include x-rem(margin, $img-right-margin);
    }

    @if $pw-img-classes {
        // For use with ProcessWire
        .align_left {
            @extend %image-left;
        }

        .align_right {
            @extend %image-right;
        }
    }
}

// Figures
figure {
    @extend %image-block;
}

// Figures/images in MagnificPopup
.mfp-content figure {
    margin: 0;
}

Use Sass defaults in images partial.
Use Sass defaults in images partial.
