Sass mixin to force a fluid container to preserve a certain aspect ratio

aspect.scss

// padding to force an aspect ratio
// -> apply mixin to a container element, and the child element will be constrained
// -> mostly used for images, but should work on basically anything
@mixin media-aspect($w, $h, $child_el: ".media-aspect-content") {
    position: relative;
    overflow: hidden;

    &::before, &:before {
        display: block;
        content: " ";
        width: 100%;
        // min-height: 100px;
        padding-top: (($w/$h) * 100%);
    }

    #{$child_el} {
        @include color('bg', 'background-color');
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@mixin media-kill-aspect {
    &:before, &::before {
        content: none;
    }
}