.roofkit-image-wrapper img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.roofkit-image--size-small img {
  max-width: 20rem;
}

.roofkit-image--size-medium img {
  max-width: 40rem;
}

.roofkit-image--size-large img {
  max-width: 60rem;
}

.roofkit-image--size-full img {
  max-width: 100%;
}

.roofkit-image--radius-none img {
  border-radius: 0;
}

.roofkit-image--radius-sharp img {
  border-radius: var(--radius-xs);
}

.roofkit-image--radius-soft img {
  border-radius: var(--radius-md);
}

.roofkit-image--radius-round img {
  border-radius: var(--radius-xl);
}

.roofkit-image--radius-pill img {
  border-radius: var(--radius-pill);
}

.roofkit-image--border-none img {
  border: none;
}

.roofkit-image--border-light img {
  border: var(--border-light);
}

.roofkit-image--border-dark img {
  border: var(--border-dark);
}

.roofkit-image--shadow-none img {
  box-shadow: none;
}

.roofkit-image--shadow-soft img {
  box-shadow: var(--shadow-soft);
}

.roofkit-image--shadow-strong img {
  box-shadow: var(--shadow-lg);
}

.roofkit-image--hover-lift.roofkit-image--shadow-soft img:hover {
  box-shadow: var(--shadow-md);
}

.roofkit-image--hover-lift.roofkit-image--shadow-strong img:hover {
  box-shadow: var(--shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .roofkit-image-wrapper img {
    transition: none;
  }
}