:root {
    --hell: #681919;
}

/*
 * Artist List
 */

#artists {
    margin: 0 auto;
    max-width: 2000px;
}

#artist-list, #preview-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}



.artist {
    background-color: var(--section-bg-color);
    display: inherit;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075),
                0 2px 2px rgba(0, 0, 0, 0.075),
                0 4px 4px rgba(0, 0, 0, 0.075),
                0 8px 8px rgba(0, 0, 0, 0.075),
                0 16px 16px rgba(0, 0, 0, 0.075);
}


.artist .image {
    width: 200px;
    position: relative;
}


.artist .image picture {
    width: 100%;
    position: relative;
}

.artist .image img,
.artist .image video {
    max-width: 200px;
    max-height: 300px;
    margin: 0;
    padding: 0;
    display: block;
    margin: auto;
}

.artist .name {
    text-align: center;
    font-size: 2em;
}

/* Large Screens (Desktop) */
@media (min-width: 1024px) {
    .artist {
        display: grid;
        width: 80%;
        min-height: 300px;
        column-gap: 2rem;
        grid-template-rows: minmax(0, min-content) minmax(0, 1fr) minmax(0, min-content);
    }

    .artist.left {
        grid-template-columns: 200px 1fr;
        grid-template-areas:
            "image    name"
            "image    info"
            "image    socials";
    }

    .artist.right {
        grid-template-columns: 1fr 200px;
        grid-template-areas:
            "name    image"
            "info    image"
            "socials image";
    }

    .artist .image {
        grid-area: image;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
    }

    .artist .name {
        grid-area: 1 / 1 / 2 / 3;
        text-align: center;
    }

    .artist .info {
        grid-area: info;
        font-size: 1.5rem;
    }

    .artist .socials {
        grid-area: 3 / 1 / 4 / 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
        margin: 0 auto;
        width: max-content;
    }

    .artist .socials .link:nth-child(odd):last-child {
        grid-column: 1 / 3;
    }
}

/* Small Screens (Mobile) */
@media (max-width: 1023px) {
    .artist {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 450px;
        max-width: 100%;
    }

    .artist .socials {
        margin: 2rem auto 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: min-content;
    }
}

.artist .info p {
    margin-top: 0;
}

.artist .socials .link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 1rem;
    gap: 0.5rem;
}

.artist .socials .link img { 
    max-width: 32px;
    max-height: 32px;
    display: block;
    -webkit-filter: drop-shadow(0 0 1px #888);
    filter: drop-shadow(0 0 1px #888);
}

.artist blockquote {
    margin: 0;
}

.artist blockquote p {
    padding: 1rem;
    background: var(--body-quote);
    border-radius: 5px;
}

.artist blockquote p::before {
    content: "\201C";
}

.artist blockquote p::after {
    content: "\201D";
}

#artists hr {
    width: 90%;
    border: 0;
    height: 1px;
    margin: 3em auto;
    display: block;
    clear: both;
    background-image: -webkit-linear-gradient(
        0deg,
        transparent,
        var(--text-color),
        transparent
    );
}

.artist .info li {
    margin: 1rem 0;
}