@media screen and (min-width: 320px) and (max-width: 767px) {    
      
    .back {
        height: 90px;
        border: 2px solid #333; 
        border-radius: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        box-shadow: 5px 5px 10px #000000, 0 0 0 0;
        transition: all 0.3s linear;
    }
    .back:hover {
        cursor: pointer;
        border: 2px solid #888;
    }
    #ppColumn a {     
        transition: 70ms;
        transition-timing-function: linear;
    }
    #ppColumn a:hover {
        transition: 350ms;
        transition-timing-function: linear;
        z-index: 10000;  
        transform: scale(1.1);
    }
    .ppDetsHolder {
        display: inline-flex;
        border-radius: 6px;
        background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0) 45%);
    }     
    .ppTextHolder {
        margin-top: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {     

    .back {
        position: relative;
        height: 90px;
        border: 2px solid #333; 
        border-radius: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        box-shadow: 5px 5px 10px #000000, 0 0 0 0;
        transition: all 300ms linear;/**/
    }
    .back:hover {
        border: 2px solid #888;
        box-shadow: 0 9px 18px #000000;
        z-index: 10000;
        cursor: pointer;
    }
    #ppColumn a {     
        transition: 70ms;
        transition-timing-function: linear;
    }
    #ppColumn a:hover {
        transition: 350ms;
        transition-timing-function: linear;
        z-index: 10000;  
        transform: scale(1.1);
    }
    .ppDetsHolder {
        display: inline-flex;
        border-radius: 8px;
        background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 45%);
    }
    .ppTextHolder {
        margin-top: 0;
    }
}

@media screen and (min-width: 961px) and (max-width: 1023px)  {    

    .back {
        position: relative;
        height: 90px;
        border: 2px solid #333; 
        border-radius: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        box-shadow: 5px 5px 10px #000000, 0 0 0 0;
        transition: all 300ms linear;
    }
    .back:hover {
        border: 2px solid #888;
        box-shadow: 0 9px 18px #000000;
        z-index: 10000;
        cursor: pointer;
    }
    #ppColumn a {     
        transition: 70ms;
        transition-timing-function: linear;
    }
    #ppColumn a:hover {
        transition: 350ms;
        transition-timing-function: linear;
        z-index: 10000;  
        transform: scale(1.1);
    }
    .ppDetsHolder {
        display: inline-flex;
        border-radius: 8px;
        background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 45%);
    }
    .ppTextHolder {
        margin-top: 0;
    }
}
@media screen and (min-width: 1024px)and (max-width: 1024px) {    

    .back {
        position: relative;
        height: 130px;
        border: 2px solid #333; 
        border-radius: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        box-shadow: 5px 5px 10px #000000, 0 0 0 0;
        transition: all 300ms linear;
    }
    .back:hover {
        border: 2px solid #888;
        box-shadow: 0 9px 18px #000000;
        z-index: 10000;
        cursor: pointer;
    }
    #ppColumn a {     
        transition: 70ms;
        transition-timing-function: linear;
    }
    #ppColumn a:hover {
        transition: 350ms;
        transition-timing-function: linear;
        z-index: 10000;  
        transform: scale(1.2);
    }
    .ppDetsHolder {
        display: inline-flex;
        border-radius: 8px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 75%);
    }
    .ppTextHolder {
        margin-top: 5px;
    }
}
@media screen and (min-width: 1025px)and (max-width: 1199px) {    

    .back {
        position: relative;
        height: 130px;
        border: 2px solid #333; 
        border-radius: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        box-shadow: 5px 5px 10px #000000, 0 0 0 0;
        transition: all 300ms linear;
    }
    .back:hover {
        border: 2px solid #888;
        box-shadow: 0 9px 18px #000000;
        z-index: 10000;
        cursor: pointer;
    }
    #ppColumn a {     
        transition: 70ms;
        transition-timing-function: linear;
    }
    #ppColumn a:hover {
        transition: 350ms;
        transition-timing-function: linear;
        z-index: 10000;  
        transform: scale(1.2);
    }
    .ppDetsHolder {
        display: inline-flex;
        border-radius: 8px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 65%);
    }
    .ppTextHolder {
        margin-top: 5px;
    }
}
@media screen and (min-width: 1200px) {    

    .back {
        position: relative;
        height: 130px;
        border: 2px solid #333; 
        border-radius: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        box-shadow: 5px 5px 10px #000000, 0 0 0 0;
        transition: all 300ms linear;
    }
    .back:hover {
        border: 2px solid #888;
        box-shadow: 0 9px 18px #000000;
        z-index: 10000;
        cursor: pointer;
    }
    #ppColumn a {     
        transition: 70ms;
        transition-timing-function: linear;
    }
    #ppColumn a:hover {
        transition: 350ms;
        transition-timing-function: linear;
        z-index: 10000;  
        transform: scale(1.2);
    }
    .ppDetsHolder {
        display: inline-flex;
        border-radius: 8px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 45%);
    }
    .ppTextHolder {
        margin-top: 5px;
    }
}
.leftArtist {
    margin-top: 10px;
    padding-left: 11px;
    display: flex;
    align-items: left;
    justify-content: left;
    flex-direction: column;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #ppColumn {
        padding: 10px 5px 10px 5px;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    #ppColumn {
        padding: 10px 5px 10px 5px;
    }
}
@media screen and (min-width: 824px) and (max-width: 1022px) {
    
    #ppColumn {
        padding: 5px 10px 10px 10px;
    }
}
@media screen and (min-width: 1024px){
    
    #ppColumn {
        padding: 5px 10px 60px 10px;
    }
}