/* ============================================================
   About page — Industry Dance Awards section
   marketing site
   ============================================================ */
.bs-about-section {
  --bs-img-max: 500px;
  --bs-img-min: 300px;
  --bs-gap: 4rem;
  padding: 60px 0 60px 60px;
  margin-left: 45px;
  margin-right: 45px;
}

.bs-about-section .bs-grid-wrapper {
  display: grid;
}

.bs-about-section .bs-lightbox-wrapper {
  background-color: #000;
  padding: 2rem;
}

.bs-about-section .bs-card-grid {
  display: grid;
  grid-template-columns: var(--bs-img-max) 1fr;
  gap: var(--bs-gap);
  align-items: start;
}

/* ---- Left column: image ---- */
.bs-about-section .bs-about-image img {
  display: block;
  width: 100%;
  height: auto;
}

.bs-about-section .bs-image-caption {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.bs-about-section .bs-image-caption a {
  letter-spacing: initial;
  font-size: initial;
}

/* ---- Right column: text ---- */
.bs-about-section .bs-intro-column {
  min-width: 0; /* allow grid item to shrink below content width */
}

.bs-about-section h3 {
  color: #ffffff;
  margin-top: 0;
}
.bs-intro-column p {
  color:  #ffffff80;
}
/* ---- Responsive ---- */

/* At 900px and below, shrink the image column proportionally,
   but never let it drop below --bs-img-min. */
@media (max-width: 900px) {
  .bs-about-section .bs-card-grid {
    grid-template-columns: minmax(var(--bs-img-min), 50%) 1fr;
  }
  .bs-about-section {
    --bs-gap: 2rem;
    padding: 32px 0 32px 32px;
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* When 50% would fall below the 300px floor, stack. */
@media (max-width: 600px) {
  .bs-about-section .bs-card-grid {
    grid-template-columns: 1fr;
  }

  .bs-about-section .bs-about-image {
    max-width: var(--bs-img-min);
    margin: 0 auto;
  }
  .bs-about-section {
    --bs-gap: 1rem;
    padding: 12px 0 12px 12px;
    margin-left: 0;
    margin-right: 12px;
  }
  .bs-intro-column blockquote {
    margin-left: 24px;
  }
}