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

: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%);
}
body{
    height:90vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:13px;
    font-family: 'Manrope', sans-serif;
    background-color: var(--Light-Grayish-Blue);
}
.wrapper{
    width:700px;
    height:250px;
    display:grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 1fr;
    border-radius:3%;
    box-shadow: 5px 5px 25px rgba(0,0,0,0.1);
    background-color: white;
}

.article-img{
  width:100%;
  height:100%;
  border-radius: 3% 0 0 3%;
}

.second-half{
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:var(--Desaturated-Dark-Blue);
}
h2{
    color: var(--Very-Dark-Grayish-Blue);
}
.article-footer{
    display:flex;
    align-items: center;
}
.article-footer-details {
    justify-self: start;
}
.author-name{
    font-size:13px;
    font-weight: bold;
    color:var(--Very-Dark-Grayish-Blue);
}
.icon-img{
    border-radius:50%;
    width:35px;
    height:35px;
    margin-right:10px;
}
.share-img{
    border-radius:50%;
    background-color: var(--Light-Grayish-Blue);
    cursor: pointer;
    padding:8px;
}


.share-container{
    position:relative;
    display: flex;
    margin-left:auto;
}
.share-box{
    display:none;
    background-color: var(--Very-Dark-Grayish-Blue);
    border-radius:5%;
    padding:6px;
    color : var(--Light-Grayish-Blue);
    justify-content: space-evenly;
    align-items:center;
    height:45px;
    width:200px;
    position: absolute;
    bottom:150%;
    left:-270%;
    cursor: pointer;
}
.share-box img{
    height:50%;
}
.share-box::after {
    content: "";
    position: absolute;
    bottom: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--Very-Dark-Grayish-Blue);
}


@media (max-width:375px) {
    .wrapper{
        display: flex;
        flex-direction: column;
        width:90vw;
        height:80vh;
    }
    .first-half img{
        border-radius: 3% 3% 0 0;
    }
    .second-half{
        gap:30px;
    }
    .article-footer{
        margin-top:auto;
    }
    .share-container{
        display:flex;
    }

}