@use 'sass:math'

.root
    margin-bottom: var(--spacing-md)

.responsive
    position: relative
    height: 0

@each $ratio1, $ratio2 in (16, 9), (4, 3)
    .ratio#{$ratio1}x#{$ratio2}
        padding-bottom: (100% * math.div($ratio2, $ratio1))

.iframe
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: var(--border-radius)

.standalone
    max-width: 100%
    border: 1px solid var(--color-subtle)
    border-radius: var(--border-radius)
    padding: var(--spacing-xs)
    margin-bottom: var(--spacing-md)

.image
    position: relative
    display: block
    max-width: 100%
    margin: 0 auto

.figure-fill
    display: block
    position: relative
    width: 100%
    img
        object-fit: contain

.image-link
    display: block

.google-sheet
    width: 100%
    margin-bottom: 1rem