* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: manrope;
}

:root {
    --very-dark-grayish-blue: hsl(217, 19%, 35%);
    --desaturated-dark-blue: hsl(214, 17%, 51%);
    --grayish-blue: hsl(212, 23%, 69%);
    --light-grayish-blue: hsl(210, 46%, 95%);
    --font-size: 0.8125rem;
    --weight-500: 500; 
    --weight-700: 700;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    background-color: var(--light-grayish-blue);
}
 
article {
    display: flex;
    flex-direction: column;
    width: clamp( 17.5rem, 90%, 350px);
    border-radius: .75rem; 
    background-color: white;
    box-shadow: 0 .3rem 0.5rem  var(--grayish-blue);
}

.image-container {
    width: 100%;
    height: auto;
    aspect-ratio: 1.65/ 1; 
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center 26%;
    border-radius: .75rem .75rem 0 0;
}

#article-description {
    padding: 2rem 1.8rem 1rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bottom {
    height: 72px;
    padding: 1rem 1.8rem 1rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bottom p {
    font-size: var(--font-size);
}

.michelle-details {
    display: flex;
    gap: 1rem;
}

img[src*="michelle"] {
    width: 2.5rem;
    border-radius: 50%;
}

.sales-pitch {
    font-size: 1rem;
    font-weight: var(--weight-700);
    color: var(--very-dark-grayish-blue);
}

.sales-pitch1 {
    font-size: var(--font-size);
    font-weight: var(--weight-500);
    color: var(--desaturated-dark-blue);
    line-height: 150%;
}

#social-links {
    display: none;
    background-color: var(--very-dark-grayish-blue);
    border-radius: 0 0 .75rem .75rem;
}

#social-links p {
    color: var(--grayish-blue);
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: var(--font-size);
}

#name {
    font-weight: 700;
    color: var(--very-dark-grayish-blue);
}

#date {
    font-weight: 500;
    color: var(--grayish-blue);
}

.share-container {
    width: 1.9rem;
    height: 1.9rem;
    background-color: var(--light-grayish-blue);
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 50%;
}

.share-container2 {
    width: 1.9rem;
    height: 1.9rem;
    background-color: var(--desaturated-dark-blue);
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 50%;
}

.left-socials {
    display: flex;
    width: 70%;
    justify-content: space-between;
}

.right-left {
    display: flex;
    justify-content: space-between;
    width: 50%;
}

.social-links {
    display: none;
    background-color: var(--very-dark-grayish-blue);
    border-radius: 0 0 .75rem .75rem;
}

@media screen and (min-width: 900px) {
    article {
        display: inline-flex;
        flex-direction: row;
        width: 700px;
        border-radius: 0.5rem;
    }

    .image-container {
        width: 100%;
        aspect-ratio: 1/1;
        overflow: hidden;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position:  0% 26%;
        border-radius: .5rem 0 0 .5rem;
    }

    .second-half {
        display: flex;
        flex-direction: column;
        padding: 0 0 1rem 0;
        justify-content: space-between;
    }

    .bottom {
        height: 72px;
        padding: 0 1.8rem 0 1.8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    #article-description {
        padding: 2rem 1.8rem 1rem 1.8rem;
        display: flex;
        height: 70%;
        flex-direction: column;
        justify-content: space-between;
    }

    .share-container {
       position: relative;
    }

    /* .share-container:hover .social-links, .share-container:hover .lower-half{
        visibility: visible;
     } */

    .social-links {
        background-color: transparent;
        visibility: hidden;
        position: absolute;
        transform: translateY(-60px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border-radius: .5rem;
    }

    div.upper-half {
        display: flex;
        justify-content: space-between;
        background-color: var(--very-dark-grayish-blue);
        border-radius: .5rem;
        width: 14rem;
        padding: 1rem 2rem;
        text-transform: uppercase;
        color: var(--grayish-blue);
        letter-spacing: 3px;
    }

    div.lower-half {
        visibility: hidden;
        width: 20px;
        height: 20px;
        background-color: var(--very-dark-grayish-blue);
        transform: translateY(-10px) rotate(45deg);
    }

    .social-links p {
        font-size: var(--font-size);
    }

}