.artist-list-img{
position:relative;
}
.artist-list-img > img{
border-radius:.125rem;
box-shadow: 0px 0px 3px #bbb, 2px 2px 4px #ccc;
transition: .3s ease;
}
.artist-list-img:hover > img{
box-shadow: 0px 0px 4px #aaa, 3px 3px 6px #aaa;
}
@media (min-width: 576px) {
.main-content{
position:relative;
}
}
@media (min-width: 1700px) {
.main-content{
max-width:70%;
}
}
.artist-list-wrap{
display:inline-block;
box-shadow: 0px 0px 3px #ddd, 2px 2px 4px #ddd;
border-radius:.125rem;
padding:.25rem;
background-color:white;
position:relative;
border: 1px solid #dee2e6;
transition: .25s ease;
width:auto!important;
}
.artist-list-wrap:hover{
box-shadow: 0px 0px 4px #ccc, 2px 2px 6px #ccc;
}
.artist-list-wrap > img{
border-radius:.125rem;
max-width:100%;
max-height:30vh;
}
@media (min-width: 992px) {
.artist-list-wrap > img{
}
}
.artist-list-img > div,
.artist-list-wrap > div.name{
position:absolute;
bottom:0;
left:0;
right:0;
color:#ffffff;
transition: .3s ease;
font-family: sans-serif;
color:rgb(255,255,255);
text-shadow: .5px .5px 3px rgba(87,95,231,.7), 0px .5px 3px rgba(71,74,196,.7), -.5px -.5px 3px rgba(71,74,196,.7), -.5px -.5px 3px rgba(71,74,196,.7), -.5px .5px 3px rgba(87,95,231,.7), .5px -.5px 3px rgba(71,74,196,.7);
line-height:1;
white-space:pre-line;
}
.artist-list-wrap > div.name{
margin-bottom:10%;
margin-left:.25rem;
margin-right:.25rem;
padding: .25rem .5rem;
background-color:rgba(0,0,0,.3);
font-size:85%;
}
a:hover .artist-list-wrap > div.name{
margin-bottom:20%;
background-color:rgba(0,0,0,.45);
}
.artist-list-img > div{
background-color:rgba(0,0,0,.3);
padding-left:.1rem;
padding-right:.1rem;
}
a:hover .artist-list-img > div{
margin-bottom:15%;
background-color:rgba(0,0,0,.45);
}
.artist-list-product{
justify-content:space-evenly;
align-items: center;
padding: .5rem;
}
.artist-list-product > div{
padding-left:.5rem;
padding-right:.5rem;
}
@media (min-width: 576px) {
.artist-list-product > div{
padding-left:.75rem;
padding-right:.75rem;
}
}
@media (min-width: 768px) {
.artist-list-product > div{
padding-left:1rem;
padding-right:1rem;
}
}
.artist-list-product a{
outline:none;
text-decoration:none;
}
.artist-list-img > div{
padding-top:.2rem;
padding-bottom:.2rem;
font-size:60%;
white-space:nowrap;
}
.artist-list-img img{
max-height:100%;
max-width:100%;
}
@media (min-width: 576px) {
.artist-list-img > div{
font-size:75%;
margin-bottom:0;
line-height:1.2;
letter-spacing:1px;
}
.artist-list-wrap > div.name{
font-size:90%;
letter-spacing:1px;
}
}
@media (min-width: 768px) {
.artist-list-wrap > div.name{
font-size:100%;
}
}
@media (min-width: 992px) {
.artist-list-wrap > div.name{
font-size:85%;
}
}
@media (min-width: 1200px) {
.artist-list-wrap > div.name,
.artist-list-img > div{
font-size:100%;
}
}
.artist-list-img{
display:inline-block;
text-align:center;
}
.artist-list-item:not(:first-child){
border-top:1px dotted #abc;
}
.artist-list-item{
padding-top:2rem;
padding-bottom:2rem;
justify-content:space-evenly;
}
.artist-list-item > div:first-child{
max-width:70vw;
}
.artist-list-item > div:last-child{
max-width:80vw;
}
.artist-address{
text-align:center;
font-size:70%;
white-space:nowrap;
overflow:visible;
}
.artist-list-size{
padding-top:.2rem;
text-align:center;
line-height:1.2;
color:#333;
font-size:60%;
}
.artist-list-size > div:last-child{
font-size:95%;
color:#777;
line-height:.6;
}
@media (min-width: 576px) {
.artist-list-size{
padding-bottom:1rem;
font-size:65%;
}
}
@media (min-width: 768px) {
.artist-list-size{
padding-bottom:1rem;
font-size:75%;
}
}
@media (min-width: 992px) {
.artist-list-size{
padding-bottom:.25rem;
font-size:85%;
}
}
.artist-list-item a{
outline:0;
}
.artist-favorite{
position:absolute;
top:.3rem;
right:.55rem;
left:auto;
bottom:auto;
color:white;
text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,.9);
opacity:0;
transition: opacity .25s ease;
}
.artist-favorite.active{
color:hsl(40, 100%, 80%);
opacity:.55;
}
.artist-list-wrap:hover .artist-favorite{
opacity:.7;
}
.artist-favorite:not(.active):hover,
.artist-favorite.active:hover{
opacity:1;
}