/* ==========================================================================
   Root Container
   ========================================================================== */

.media-default-skin {
  container: media-root / inline-size;
  position: relative;
  isolation: isolate;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: var(--media-border-radius, 2rem);
  font-family:
    Inter Variable,
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;

  & > * {
    font-size: 0.75rem; /* 12px at 100% font size */
  }

  @container media-root (width > 48rem) {
    & > * {
      font-size: 0.875rem; /* 14px at 100% font size */
    }
  }
}