/* GENERATED by scripts/build/tailwind/build-tailwind.ts — edit frameworks/tailwind/Theme.css or a manifest, not this file. */
@import '../../../Prelude.generated.css';

@layer utilities {
  .arena-figure__root {
    margin: 0px;
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: var(--gap-items);
  }
  .arena-figure__frame {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--r-media);
    border-style: var(--tw-border-style);
    border-width: var(--bw-surface);
    border-color: var(--edge-surface);
    background-color: var(--fill-surface-sunken);
    color: var(--ink-eyebrow);
    --tw-shadow: var(--shadow-surface-rest);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .arena-figure__media {
    grid-column-start: 1;
    grid-row-start: 1;
    height: 100%;
    width: 100%;
    min-width: 0px;
    &>img {
      height: 100%;
    }
    &>img {
      width: 100%;
    }
    &>img {
      object-fit: var(--fit-media);
    }
    &>video {
      height: 100%;
    }
    &>video {
      width: 100%;
    }
    &>video {
      object-fit: var(--fit-media);
    }
  }
  .arena-figure__fallback {
    grid-column-start: 1;
    grid-row-start: 1;
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
  }
  .arena-figure__overlay {
    grid-column-start: 1;
    grid-row-start: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-inline);
    align-self: flex-end;
    background-color: var(--overlay-media);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--overlay-media) 72%, transparent);
    }
    padding: var(--pad-surface);
    color: var(--ink-heading);
  }
  .arena-figure__caption {
    margin: 0px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    --tw-leading: var(--lh-prose);
    line-height: var(--lh-prose);
    color: var(--ink-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ink-muted) var(--level-ink-muted), transparent);
    }
  }
}