.hero-container {
    background-image: url('/imgs/assets/artist_bgs/tyler_bw_mobile.webp');

    .gradient {
        width: 100%;
        background: rgba(0,0,0,.4);
        background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(222, 227, 231, 0) 75%);
    }
}

@media(min-width: 992px) {
    .hero-container {
        background-image: url('/imgs/assets/artist_bgs/tyler_bw.webp');

        .gradient {
            /* width: 50%; */
            background: #000000;
            background: linear-gradient(70deg,rgba(0, 0, 0, 1) 35%, rgba(222, 227, 231, 0) 60%);
        }
    }
}

.hero-heading {
    line-height: 2.25rem;
}

@media(min-width: 992px) {
    .hero-heading {
        line-height: 2.75rem;
    }
}

.cta {
    background-color: var(--bg-2);

    .container .row {
        min-height: 50vh;
    }
}

#cta-1 {
    background-image: url('/imgs/assets/artist_bgs/noize_hero_4_mobile.webp');
}

#cta-2 {
    background-image: url('/imgs/assets/artist_bgs/tyler_bw_mobile_2.webp');
}

@media(min-width: 992px) {
    .cta {
        .container .row {
            min-height: 15vh;
        }
    }

    #cta-1, #cta-2 {
        background-image: none;
    }
}

#tatooDetailInputs, #piercingDetailInputs {
  transition: all .7s ease-in-out;
  max-height: 0px;
  overflow: hidden;
}

.contact-bg {
    width: 75%;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media(min-width: 992px) {
    .contact-bg {
        height: 100%;
        width: auto;
    }
}