/* Defaults: any rule directly in ed-utilities wins (nested layer);
   :where() keeps them at zero specificity as a safety net. */
@layer ed-utilities.defaults {
  [class*='ed-frame'] > * {
    margin-block: 0;
    margin-inline: 0;
  }

  :where([class*='ed-frame']) {
    gap: var(--ed-space-4);
    align-items: center;
    justify-content: center;
  }
}

@layer ed-utilities {
  [class*='ed-frame'] {
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  [class*='ed-frame'] > img,
  [class*='ed-frame'] > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  [class*='ed-frame'][class*='\:square'] {
    aspect-ratio: 1 / 1;
  }
  [class*='ed-frame'][class*='\:landscape'] {
    aspect-ratio: 16 / 9;
  }
  [class*='ed-frame'][class*='\:portrait'] {
    aspect-ratio: 9 / 16;
  }
}