.artists {
  padding: 4em 0;
}

.artists h1 {
  margin-bottom: .3em;
}

.artists .artist-type-btns {
  display: flex;
  justify-content: space-evenly;
}

.artists .artist-type-btns h2 {
  font-size: 1em;
  cursor: pointer;
  border: .07em solid var(--color-paleblue);
  border-radius: .7em;
  padding: 0 .8em;
}

.artists .artist-type-btns h2.active {
  background-color: var(--color-paleblue);
}

.artists ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5em;
  list-style: none;
  padding-left: 0;
}

.artist-grid li {
  display: none;
}

.artist-grid li.show {
  display: unset;
}

.artists img {
  width: 100%;
  height: auto;
  border-radius: 1em 1em 0 0;
}

.artists .card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .7em;
  margin-top: -2.2em;
  position: relative;
  color: var(--color-darkgray);
  background-color: white;
  text-align: center;
  border-radius: 1em;
  padding: 1em;
  border-bottom: .05em solid black;
}
.artists .card-info h2 {
  margin-top: 0;
}

.artists .tags {
  margin-top: -1em;
}

@media (min-width:538px) {
  .artists .artist-type-btns h2 {
    font-size: 1.3em;
  }

  .artists ul {
    grid-template-columns: 1fr 1fr 1fr;

  }

}