@layer components {
  .image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 0;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &[data-ratio="1/1"] {
      aspect-ratio: 1 / 1;
    }

    &[data-ratio="4/3"] {
      aspect-ratio: 4 / 3;
    }

    &[data-ratio="16/9"] {
      aspect-ratio: 16 / 9;
    }

    &[data-ratio="21/9"] {
      aspect-ratio: 21 / 9;
    }
  }

  .image-caption {
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-align: center;
  }
}