@casoon/dragonfly/ui/components/media.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Medien-Element Styles
 */

@layer elements {
  /* Bilder */
  img {
    border-radius: var(--radius-media, var(--radius-sm, 0.25rem));
    display: block;
    height: auto;
    max-width: 100%;
  }

  /* Videos */
  video {
    border-radius: var(--radius-media, var(--radius-sm, 0.25rem));
    display: block;
    height: auto;
    max-width: 100%;
  }

  /* Iframes */
  iframe {
    border: var(--border-width, 1px) solid var(--color-border, var(--color-neutral-200, #e5e7eb));
    border-radius: var(--radius-media, var(--radius-sm, 0.25rem));
    max-width: 100%;
  }
  
  /* Media Container */
  .media {
    border-radius: var(--radius-media, var(--radius-sm, 0.25rem));
    overflow: hidden;
    
    img, video {
      border-radius: 0;
    }
  }
  
  /* Responsive Media */
  .media--responsive {
    aspect-ratio: var(--media-aspect-ratio, 16/9);
    position: relative;
    
    img, video, iframe {
      height: 100%;
      inset: 0;
      object-fit: cover;
      position: absolute;
      width: 100%;
    }
  }
  
  /* Media Sizes */
  .media--xs {
    max-width: 4rem;
  }
  
  .media--sm {
    max-width: 8rem;
  }
  
  .media--md {
    max-width: 1%6rem;
  }
  
  .media--lg {
    max-width: 2%4rem;
  }
  
  .media--xl {
    max-width: 3%2rem;
  }
}