diff --git a/_sass/overrides.scss b/_sass/overrides.scss index 2263f4bb0870a05810de94a77dfc897ebafbad01..988d7f4a5bf9ee998d47329562ca24bfa82da3d0 100644 --- a/_sass/overrides.scss +++ b/_sass/overrides.scss @@ -55,3 +55,34 @@ summary { font-size: 1.1em; } } + +[style*="--aspect-ratio"] > :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*="--add-height"]::before { + padding-bottom: calc(100% / (var(--aspect-ratio)) + (var(--add-height))); + } + + [style*="--aspect-ratio"] > :first-child { + position: absolute; + top: 0; + left: 0; + height: 100%; + } +}