[Summary view] [Print] [Text view]

   1  // Credit: Nicolas Gallagher and SUIT CSS.
   2  
   3  .ratio {
   4    position: relative;
   5    width: 100%;
   6  
   7    &::before {
   8      display: block;
   9      padding-top: var(--#{$variable-prefix}aspect-ratio);
  10      content: "";
  11    }
  12  
  13    > * {
  14      position: absolute;
  15      top: 0;
  16      left: 0;
  17      width: 100%;
  18      height: 100%;
  19    }
  20  }
  21  
  22  @each $key, $ratio in $aspect-ratios {
  23    .ratio-#{$key} {
  24      --#{$variable-prefix}aspect-ratio: #{$ratio};
  25    }
  26  }