/*------------------------------------*\
    #FIXED ASPECT RATIO
\*------------------------------------*/

/**
 * Full-width containers with fixed aspect ratios. The container's content can
 * then be set to occupy the full width and height of the container.
 *
 * Useful for responsively embedding video.
 */

.#{$sagovau-namespace}fixed-aspect-ratio {
    height: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

    .#{$sagovau-namespace}fixed-aspect-ratio__content {
        height: 100%;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 100%;
    }


.#{$sagovau-namespace}fixed-aspect-ratio--2x1 {
    padding-bottom: (1 / 2) * 100%;
}

.#{$sagovau-namespace}fixed-aspect-ratio--16x9 {
    padding-bottom: (9 / 16) * 100%;
}

.#{$sagovau-namespace}fixed-aspect-ratio--4x3 {
    padding-bottom: (3 / 4) * 100%;
}

.#{$sagovau-namespace}fixed-aspect-ratio--1x1 {
    padding-bottom: 100%;
}