@layer cavalree {
  :where(.c-frame) {
    --c-frame--aspect-ratio: auto;
    --c-frame--border--radius: 0px;
    --c-frame--border--radius--end-end: var(--c-frame--border--radius);
    --c-frame--border--radius--end-start: var(--c-frame--border--radius);
    --c-frame--border--radius--start-end: var(--c-frame--border--radius);
    --c-frame--border--radius--start-start: var(--c-frame--border--radius);
    --c-frame--object-position: 50%;
    --c-frame--object-position--x: var(--c-frame--object-position);
    --c-frame--object-position--y: var(--c-frame--object-position);
  }

  .c-frame {
    aspect-ratio: var(--c-frame--aspect-ratio);
    display: block; /* TODO: and_chr >= 115, chrome >= 115, edge >= 115 */
    display: block flow;
    inline-size: 100%;
  }

  .c-frame_content {
    block-size: 100%;
    border-end-end-radius: var(--c-frame--border--radius--end-end);
    border-end-start-radius: var(--c-frame--border--radius--end-start);
    border-start-end-radius: var(--c-frame--border--radius--start-end);
    border-start-start-radius: var(--c-frame--border--radius--start-start);
    inline-size: 100%;
    object-fit: cover;
    object-position: var(--c-frame--object-position--x) var(--c-frame--object-position--y);
  }
}