/*
    COMPONENT CSS
    =============
    Descrition : Makes container element maintain given aspect ratio responsively

    Component Class Name : .res_ar_default

    Component useage :

        To use, set a custom property scoped to the element it's needed on :

            <div style="--aspect-ratio:815/419;">
            </div>

            <div style="--aspect-ratio:16:9;">
            </div>

            <!-- even single value -->
            <div style="--aspect-ratio:1.4;">
            </div>

    Inspiration : http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/

    Explanation :
        We use [style*="--aspect-ratio"] as a hook to target the appropriate boxes
        We stretch the inner box regardless of support for custom property
        We make sure the height of images comes from their intrinsic ratio rather than their height attribute
        We style the container as a containing block (so the inner box references that ancestor for its positioning)
        We create a pseudo-element to be used with the “padding hack” (it is that element that creates the aspect ratio)
        We use calc() and var() to calculate padding based on the value of the custom property
        We style the inner box so it matches the dimensions of its containing block

*/

.res_ar_img {
background: green;
}

[style*="--aspect-ratio"] > :first-child,
[style*="--aspect-ratio"] noscript > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {
  height: auto;
}
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }
  [style*="--aspect-ratio"] > :first-child,
  [style*="--aspect-ratio"] noscript > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}