/* Base container classes */
.img-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Common aspect ratios */
.img-container--16-9 {
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.img-container--4-3 {
  padding-bottom: 75%; /* 4:3 aspect ratio */
}

.img-container--square {
  padding-bottom: 100%; /* 1:1 aspect ratio */
}

/* Campaign specific (854x480 is exact 16:9) */
.img-container--campaign {
  padding-bottom: 56.25%; /* 16:9 aspect ratio (480/854*100) */
}

/* Project specific (854x480 is exact 16:9) */
.img-container--project {
  padding-bottom: 56.25%; /* 16:9 aspect ratio (480/854*100) */
}

/* Responsive image within container */
.img-responsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Default to cover for most images */
  transition: transform 0.3s ease;
}

/* Contain variant */
.img-responsive--contain {
  object-fit: contain;
}

/* Profile specific (for circular images) */
.img-profile {
  object-fit: cover;
  border-radius: 50%;
}