.artists-availability {
  padding: 4em 0;
}

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

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

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

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

.artists-availability .not-available-message {
  text-align: center;
}

.artists-availability ul {
  list-style: none;
  padding-left: 0;

}

.calendars-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .8em;
  justify-content: center;
}

.calendars-grid li {
  display: none;
}

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

.artist-calender {
  width: 450px;
  padding: 1em;
  background-color: rgb(65, 65, 65);
  border-radius: .3em;

}

.artists-availability header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.artists-availability .artist-info {
  display: flex;
  flex-direction: column;
  gap: .6em;
}

.artists-availability .artist-info h2 {
  margin: 0;
  font-size: 1.8em;
}

.artist-calender img {
  width: 120px;
  height: auto;
  border-radius: 50%;
}

.artist-info .tags {
  display: flex;
  gap: .3em;
}

.artist-info .tags div {
  color: rgba(255, 255, 255, 0.907);
  background-color: var(--color-paleblue);
  border-radius: .5em;
  padding: 0 .4em;
}

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

  .artist-calender img {
    width: 150px;
  }

  .artist-info {
    font-size: .7em;

  }

}