.mediumHeader {
  height: 20vh;
  display: flex;
  align-items: flex-end;
  padding: 0 10%;
  font-size: 1.5rem;
}

.artistInfo {
  padding-bottom: 10%;
  border-bottom: dashed var(--mainColour) 2px;
  margin-bottom: 5%;
  padding: 0 10% 10% 10%;
}

.artistInfo img {
  width: 100%;
  max-width: 100%;
  padding: 5% 0%;
}

.artistInfo.zied {
  /* border-top: dashed var(--mainColour) 2px; */
  padding-top: 5%;
}
.artistInfo.abdul {
  border-bottom: none;
}

.artistInfo ul {
  list-style-type: none;
}

.artistInfo a:link,
.artistInfo a:visited {
  color: var(--accentColour);
  text-decoration: none;
}

.artistInfo a:hover {
  color: white;
  text-decoration: underline;
}

.bio h3 {
  margin-bottom: 10%;
}

@media only screen and (min-width: 600px) {
  .mediumHeader {
    height: 10vh;
    padding: 0 5%;
  }
  .artistInfo {
    display: flex;
    padding: 0 5% 5% 5%;
  }

  .artistName {
    width: 40%;
    padding-right: 5%;
    align-self: center;
  }

  .bio {
    width: 60%;
    align-self: center;
  }
}

@media only screen and (min-width: 900px) {
  .artistName img {
    width: 75%;
    padding: 0%;
  }

  .mediumHeader,
  .artistInfo {
    /* padding: 0 3%; */
  }
}

@media only screen and (min-width: 1200px) {
  .artistName h3,
  .artistName a {
    font-size: 1.3rem;
  }

  .bio h3 {
    margin-bottom: 5%;
  }
}

@media only screen and (min-width: 1920px) {
  p {
    font-size: 1.3rem;
  }

  .artistName h3,
  .artistName a {
    font-size: 1.5rem;
  }
}