main {

}

#bio-text {
  margin: 5px 5px 5px 5px;
}

.bio {
  max-width: 90%;
}

.max-center {
  flex: 1 1 0;
  max-width: 1000px;
}

#artist-photo {
  max-width: 400px;
  height: auto;
  width: auto;
}

.image-grid {
  /* I need to tell it to be 4 wide when possible */
  max-width: 90%;
  justify-items: center;
  margin: 20px 20px 20px 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-columns: 250px;
}

.center-content {
  display: flex;
  justify-content: center;
}

[class^='grid-item'] {
  background-color: #303134;
  border: black 2px solid;
  border-radius: 15px;
  height: 50px;
  width: 50px;
}

@media only screen and (min-width: 750px) {
  /* Styles for larger screens */

  .flex-container {
    display: flex;
    flex-direction: row;
  }

  .image-grid {
    max-width: 80%;
  }
}