/* Manual responsive widths for gallery grid */
.gallery-wrapper .w-1-2 {
  width: 50%;
}
.gallery-wrapper .w-1-3 {
  width: 33.333333%;
}
@media (max-width: 1023px) {
  .gallery-wrapper .md-w-1-3 {
    width: 100%;
  }
}
@media (max-width: 720px) {
  .gallery-wrapper .sm-w-1-2 {
    width: 100%;
  }
}

/* Fix: featured photo on About/Projects/Contact left a gap beside the
   fixed right-hand image panel because the plain <img> kept its natural
   aspect ratio instead of filling the panel. */
.card-inner .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* .card-image reuses the ".col" grid class, so it inherits the generic
   nested-column gutter from ".row .col .col { padding: 16px 28px }" in
   basic.css. That gutter is meant for form/content columns, not this
   fixed full-bleed image panel - it left a visible inset around the
   photo. Zero it out so the photo runs edge-to-edge. */
.card-inner .card-image {
  padding: 0 !important;
}