.artist {
    display: grid;
    grid-template-columns: 15em 25em;
    grid-template-rows: 6.5em 8.5em 1fr;
    gap: 1em 1em;
    grid-template-areas: 
      "image name"
      "image social"
      "description description"
      "songs songs";
    padding: 0.75rem;
    margin: 2rem auto;
    border-radius: var(--radius);
    background: var(--foreground);
    color: var(--text);
}

.artist-image {
    grid-area: image;
    object-fit: cover;
    width: 100%;
    max-height: 100%;
    border-radius: var(--radius);
}

@media only screen and (min-width: 513px) { 
    .artist-image {
        height: 100%;
    }
}

.artist-info {
    grid-area: name;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0 0;
    grid-auto-flow: row;
    grid-template-areas:
    "artist-name"
    "artist-nicknames";
}

.artist-name {
    grid-area: artist-name;
    font-weight: 900;
    font-size: 36px;
    margin: 0;
}

.artist-nicknames {
    grid-area: artist-nicknames;
    font-weight: 300;
    font-size: 14px;
    margin: 0;
}

.artist-description {
    grid-area: description;
}

.artist-songs {
    grid-area: songs;
}

.artist-search-songs {
    padding: 10px 20px;
    border-radius: var(--radius);
    background-color: var(--background);
    color: var(--text);
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.artist-search-songs:hover {
    background: var(--highlighted);
    transform: var(--hover-transform);
}

.artist-socials {
    grid-area: social;
    display: flex;
    flex-direction: column;
    gap: 0.5em 0;
}

.social {
    padding: 0.4em;
    border-radius: var(--radius);
    text-decoration: none;
    display: grid;
    grid-template-columns: 2em 1fr;
    grid-template-rows: 1fr;
    gap: 5px 0;
    grid-template-areas: 
      "icon name";
    align-items: center;
    transition: var(--hover-transition);
}

.social:hover {
    box-shadow: var(--shadow);
    transform: var(--hover-transform);
}

.social-icon {
    grid-area: icon;
    width: 26px;
    height: 26px;
}

.social-name {
    grid-area: name;
    color: var(--text);
    font-size: 22px;
    font-weight: 400;
    margin: 0;
}

.facebook {
    grid-area: facebook;
    background-color: var(--facebook);
}

.instagram {
    grid-area: instagram;
    background-color: var(--instagram);
}

.twitter {
    grid-area: twitter;
    background-color: var(--twitter);
}

@media only screen and (max-width: 512px) { 
    .artist {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: 
            "image" 
            "name" 
            "social" 
            "description"
            "songs";
    }
}

@media only screen and (min-width: 513px) and (max-width: 768px) { 
    .artist {
        grid-template-columns: auto auto auto;
        grid-template-rows: auto;
        grid-template-areas:
            "image name"
            "image social"
            "description description"
            "songs songs";
    }
}



/* Genius Styling */

.artist-description img {
    object-fit: scale-down;
    width: 100%;
    height: 100%;
}

.embedly_preview a {
    text-decoration: none;
}

.gray_container {
    display: flex;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--hover-transition);
}

.gray_container:hover {
    background: var(--highlighted);
    transform: var(--hover-transform);
}

.gray_container div {
    display: flex;
    margin: 10px auto 10px auto;
}

.embedly_preview-text {
    flex-direction: column;
    gap: 10px;
}

.embedly_preview-title {
    font-weight: 900;
}

.embedly_preview-dash, .embedly_preview-provider {
    display: none;
}

.embedly_preview-thumb img {
    object-fit: cover;
    overflow: hidden;
    margin: 10px;
    margin-top: auto;
    border-radius: var(--radius);
}