/* ================================================
   SECTION SPACING
   ================================================ */

section {
  padding-block: var(--space-section);
}

/* ================================================
   IMAGE SLOT (brand placeholder)
   ================================================ */

.image-slot {
  position: relative;
  overflow: hidden;
  background-color: var(--color-accent);
}

.image-slot__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.image-slot--collection {
  width: 100%;
  aspect-ratio: 3 / 4;
}

.image-slot--portfolio {
  width: 100%;
  height: 100%;
}

/* ================================================
   RESPONSIVE BREAKPOINTS
   ================================================ */

/* sm: 600px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */