/* ==================================================
   Image Component
   schwimm einfach Theme
================================================== */

/*
 * Responsive Standardbild
 */
.image {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Bild füllt den verfügbaren Bereich
 * und wird passend zugeschnitten.
 */
.image--cover {
  object-fit: cover;
}

/*
 * Bild bleibt vollständig sichtbar.
 */
.image--contain {
  object-fit: contain;
}

/*
 * Abgerundetes Bild
 */
.image--rounded {
  border-radius: var(--radius-lg);
}

/*
 * Kreisförmiges Bild
 *
 * Nur bei quadratischen Bildern verwenden.
 */
.image--circle {
  border-radius: 50%;
}

/*
 * Bildverhältnisse
 */
.image--landscape {
  aspect-ratio: 4 / 3;
}

.image--portrait {
  aspect-ratio: 3 / 4;
}

.image--square {
  aspect-ratio: 1 / 1;
}

.image--wide {
  aspect-ratio: 16 / 9;
}

/*
 * Standardmäßige Bildposition
 */
.image--center {
  object-position: center;
}

.image--top {
  object-position: center top;
}

.image--bottom {
  object-position: center bottom;
}