@media (max-width: 1100px) {
    .card-button {
        width: 150px;
    }

    .card-button p {
        font-size: 1.3rem;
    }
}

@media (max-width: 1000px) {
    .card-button {
        width: 140px;
    }

    .artist {
        bottom: 160px;
    }
}

@media (max-width: 910px) {
    .card-button {
        width: 120px;
    }

    .artist p {
        line-height: 60px;
        letter-spacing: 20px;
    }

    .card-button p {
        font-size: 1.1rem;
    }
}

@media (max-width: 870px) {
    .artist p {
        letter-spacing: 15px;
    }
}

@media (max-width: 785px) {
    .artist p {
        font-size: 70px;
    }

    .card-button {
        width: 110px;
    }

    .card-button p {
        font-size: 1rem;
    }
}

@media (max-width: 719px) {
    .artist p {
        font-size: 60px;
        line-height: 50px;
    }

    .artist {
        height: 50px;
    }

    .card-button {
        margin-bottom: 10px;
        width: 180px;
    }

    .hero-card-button {
        flex-wrap: wrap;
    }

    .card-button p {
        font-size: 1.5rem;
    }

    .artist {
        bottom: 335px;
    }
}

@media (max-width: 654px) {
    .artist p {
        font-size: 50px;
        line-height: 40px;
    }

    .artist {
        height: 40px;
    }

    .card-button {
        width: 170px;
    }

    .artist {
        bottom: 315px;
    }

    .hero-card-button {
        bottom: 3%;
    }

    @keyframes floatImage {
        0% {
            transform: translate(-50%, -50%) scale(1.5);
        }
        25% {
            transform: translate(-55%, -45%) scale(1.5);
        }
        50% {
            transform: translate(-45%, -40%) scale(1.5);
        }
        75% {
            transform: translate(-55%, -45%) scale(1.5);
        }
        100% {
            transform: translate(-50%, -50%) scale(1.5);
        }
    }
}

@media (max-width: 587px) {
    .artist p {
        letter-spacing: 12px;
    }
}

@media (max-width: 550px) {
    .artist p {
        letter-spacing: 10px;
    }

    .card-button {
        width: 160px;
    }

    .artist {
        bottom: 290px;
    }

    @keyframes floatImage {
        0% {
            transform: translate(-50%, -50%) scale(1.8);
        }
        25% {
            transform: translate(-55%, -45%) scale(1.8);
        }
        50% {
            transform: translate(-45%, -40%) scale(1.8);
        }
        75% {
            transform: translate(-55%, -45%) scale(1.8);
        }
        100% {
            transform: translate(-50%, -50%) scale(1.8);
        }
    }
}

@media (max-width: 520px) {
    .card-button {
        width: 140px;
    }

    .artist {
        bottom: 260px;
    }

    .artist p {
        letter-spacing: 9px;
    }

    .card-button p {
        font-size: 1.3rem;
    }

}

@media (max-width: 486px) {
    .card-button {
        width: 130px;
    }

    .artist p {
        letter-spacing: 8px;
    }
}

@media (max-width: 470px) {
    .card-button {
        width: 120px;
    }

    .artist p {
        font-size: 40px;
        line-height: 30px;
    }

    .artist {
        bottom: 230px;
        height: 30px;
    }

    .card-button p {
        font-size: 1.1rem;
    }
}

@media (max-width: 403px) {
    .card-button {
        width: 110px;
    }

    .artist p {
        letter-spacing: 6px;
    }

    @keyframes floatImage {
        0% {
            transform: translate(-50%, -50%) scale(2.5);
        }
        25% {
            transform: translate(-55%, -45%) scale(2.5);
        }
        50% {
            transform: translate(-45%, -40%) scale(2.5);
        }
        75% {
            transform: translate(-55%, -45%) scale(2.5);
        }
        100% {
            transform: translate(-50%, -50%) scale(2.5);
        }
    }

    .card-button p {
        font-size: 14px;
    }
}

@media (max-width: 369px) {
    .card-button {
        width: 110px;
    }

    .artist p {
        font-size: 36px;
    }

    .artist {
        bottom: 215px;
    }
}

@media (max-width: 350px) {
    .card-button {
        width: 100px;
    }

    .artist {
        bottom: 200px;
    }

    .hero-card-button {
        bottom: 2%;
    }

    .artist p {
        font-size: 34px;
    }
}

@media (max-width: 330px) {
    .card-button {
        width: 90px;
    }

    .artist p {
        letter-spacing: 5px;
    }

    .artist {
        bottom: 180px;
    }
}