/* ==========================================================================
   ABOUT SECTION STYLES
   ========================================================================== */

/* Controls a div that contains all but the header of the About section. */
.about-container {
  max-width: 900px;
  /* Center. */
  margin: 0 auto 0 auto;
  text-align: center;
}

/* Controls the image in the About section. */
.about-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin-bottom: 2rem;
}

/* Controls the two-column format for textual information about the band. */
.about-content-grid {
  display: flex;
  gap: 2.5rem;
  text-align: left;
}

/* Controls each of the columns in the .about-content-grid div. */
.about-col {
  /* Forces each column to divide the space equally. */
  flex: 1;
}

/* Controls the list of band members. */
.band-members-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Controls each element within the list of band members. */
.band-members-list li {
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Controls the names of band members. */
.member-name {
  /* Bold. */
  font-weight: 700;
  /* Pure white. */
  color: #ffffff;
}

/* Controls the roles of band members. */
.member-role {
  /* Off-white. */
  color: #cccccc;
  /* Slightly smaller than usual. */
  font-size: 0.95rem;
}

/* Adjustments on mobile. */
@media (max-width: 768px) {

  /* Switch to putting the two columns below each other. */
  .about-content-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
}