/*
 * "ЗАД КАДЪР" photos (Projects and About pages).
 * Loaded only on those two templates, after narrow-custom.
 *
 * Photos fill their frames. Both pages use the same thin orange outline;
 * only the section background differs (dark on Projects, light on About).
 */
.bts-item .bts-media {
  border: 0 !important;
  box-shadow: none;
}
body.narrow-projects-page .bts-item .bts-media,
body.narrow-about-page .bts-item .bts-media {
  border: 1px solid rgba(255, 120, 79, 0.5) !important;
}
.bts-media .bts-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The label sits on top of the photo, so it gets a solid pill background. */
.bts-media .bts-label {
  position: relative;
  z-index: 1;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 247, 236, 0.94) !important;
  color: var(--narrow-text-primary) !important;
}


/* Light captions on the dark Projects section; About keeps its current palette. */
body.narrow-projects-page .bts-section .bts-caption {
  color: var(--narrow-text-light) !important;
}


/* Give each photo and its caption a little more room. */
body:is(.narrow-projects-page, .narrow-about-page) .bts-section .bts-grid {
  column-gap: 1.5rem !important;
  row-gap: 2rem !important;
}