.artist-hero {
  .artist-hero__image {
    max-height: 80vh;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media only screen and (max-width: 749px) {
      max-height: 70vh;
    }
  }

  .hero__header {
    width: 100%;
    display: block;
    font-size: 67.34px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 3.3px;
    margin-top: auto;
    margin-bottom: 50px;

    @media only screen and (max-width: 749px) {
      font-size: 40px;
      letter-spacing: 1.8;
      margin-bottom: 8px;
    }
  }

  .col-usps-wrapper {
    position: relative;
    display: block;
    z-index: 1;
  }
}

.artist-hero .bg-content {
  position: relative;

  .gradient-hero {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(33, 35, 34, 0.00) 0%, #000 93.75%);
    display: flex;
    height: 60%;

    .artist-content__wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 24px 0;

      @media only screen and (max-width: 749px) {
        padding-bottom: 48px;
      }

      .artist-subwrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-bottom: 40px;

        @media only screen and (max-width: 749px) {
          padding-bottom: 32px;
        }

        .artist-tags {
          margin: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 8px;
          padding-left: 0;

          .list-tag__item {
            text-transform: uppercase;
            font-family: 'BullText-Medium';
            font-size: 12px;
            color: #fff;
            padding: 6px 24px;
            justify-content: center;
            align-items: center;
            border-radius: 32px;
            background-color: #CB003D;
          }
        }
      }

      .artist-backlink {
        width: 100%;
        text-align: left;

        @media only screen and (max-width: 749px) {
          padding-bottom: 32px;
        }

        a {
          text-transform: uppercase;
          font-family: 'BullText-Medium';
          color: #fff;
          text-decoration: none;
          font-size: 16px;

          svg {
            transform: rotate(180deg);
          }

          @media only screen and (max-width: 749px) {
            font-size: 12px;
          }
        }

        a:hover {
          color: #FFC72A;
        }
      }
    }
  }
}