.trending-artists {
    background: url("/images/trending-artists/trending-artists-bg-desktop.png") top center no-repeat fixed;
    background-size: cover;
    padding: 60px 0;
}

.trending-artists h2 {
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 36px;
    color: #fff;
    margin: 0 0 30px 0;
    display: block;
    text-align: center;
}

.trending-artist-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.trending-artist-card {
    display: flex;
    width: 48%;
    position: relative;
    align-items: center;
    justify-content: space-between;
}

.trending-col-left {
    width: 48%;
    position: relative;
}

.trending-col-right {
    width: 52%;
    position: relative;
    padding: 20px 20px 20px 30px;
    border: 1px solid red;
}

.trending-artist-image {
    width: 100%;
    height: 220px;
    position: relative;
}

.trending-artist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fills container with no empty space */
    object-position: center;
    /* keeps image centered */
    position: absolute;
    z-index: 1;
}

.trending-artist-img-bkg {
    position: absolute;
    margin: 0;
    top: -10px;
    right: -10px;
    z-index: 0;
    background: #EAA347;
    width: 100%;
    height: 100%;
}

.trending-artist-img-bkg.img-yellow {
    background-color: #EAA347;
}

.trending-artist-img-bkg.img-orange {
    background-color: #FC5F00;
}

.trending-artist-img-bkg.img-red {
    background-color: #EC3F5D;
}

.trending-artist-img-bkg.img-blue {
    background-color: #67B6DD;
}

.trending-artist-content {
    width: 100%;
    color: #fff;
}

.trending-artist-content a {
    color: #fff;
}

.trending-artist-content h3 {
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.trending-artist-content p {
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 500;
    font-style: Italic;
    font-size: 14px;
    margin: 0 0 20px 0;
}

.trending-artist-content .icon-location {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23FFFFFF' width='800px' height='800px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,14 C9.790861,14 8,12.209139 8,10 C8,7.790861 9.790861,6 12,6 C14.209139,6 16,7.790861 16,10 C16,12.209139 14.209139,14 12,14 Z M12,13 C13.6568542,13 15,11.6568542 15,10 C15,8.34314575 13.6568542,7 12,7 C10.3431458,7 9,8.34314575 9,10 C9,11.6568542 10.3431458,13 12,13 Z M12.3391401,20.8674017 C12.1476092,21.0441994 11.8523908,21.0441994 11.6608599,20.8674017 C7.23483091,16.7818365 5,13.171725 5,10 C5,6.13400675 8.13400675,3 12,3 C15.8659932,3 19,6.13400675 19,10 C19,13.171725 16.7651691,16.7818365 12.3391401,20.8674017 Z M18,10 C18,6.6862915 15.3137085,4 12,4 C8.6862915,4 6,6.6862915 6,10 C6,12.7518356 7.98660341,16.0353377 12,19.8163638 C16.0133966,16.0353377 18,12.7518356 18,10 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    height: 24px;
    width: 24px;
    float: left;
    margin: 0 5px 0 0;
}

.trending-artist-content .icon-date {
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9H21M7 3V5M17 3V5M6 12H8M11 12H13M16 12H18M6 15H8M11 15H13M16 15H18M6 18H8M11 18H13M16 18H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    height: 20px;
    width: 20px;
    float: left;
    margin: 0 5px 0 0;
}

.trending-artist-details .trending-artist-row {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.icon {
    margin-right: 8px;
    opacity: 0.8;
}

@media only screen and (max-width: 600px) {
    .trending-artists {
        background: url("/images/trending-artists/trending-artists-bg-mobile.png") top center no-repeat fixed;
        background-size: cover;
        padding: 30px 0;
    }

    .trending-artists h2 {
        font-size: 30px;
    }

    .trending-artist-card {
        width: 100%;
        display: block;
        position: relative;
    }

    .trending-col-left {
        width: 96%;
        display: block;
    }

    .trending-col-right {
        width: 96%;
        display: block;
        float: right;
        margin-top: -30px;
        padding-top: 40px;
    }

}