.article{
    --spacing: 3.5vh;
    padding:2vh 2vw;
}
.article .title{
    text-align: center;
}
.article .title-cont::before{
    display: none;
}

.article .date{
    color: var(--text-gray);
    font-weight: 600;
    text-align: center;
}

.article .main-img img{
    width: 100%;
    height: 20vh;
    margin-bottom: var(--spacing);
    border-radius: 10px;
}

.article h3{
    font-weight: 600;
    margin-top: var(--spacing);
    text-align: left;
}
.article .bold li{
    font-weight: 600;
}

.article .highlight{
    margin-top: var(--spacing);
    background: var(--light-mustard);
    padding: 2vh 6vw;
    color: inherit;
    text-decoration: none;
}
.article .highlight:hover{
    text-decoration: none;
    color: inherit;
}
.article .highlight h3{
    margin-top: auto;
}

.article .by{
    margin-top: var(--spacing);
    color: var(--text-gray);
    font-weight: 600;
}

@media screen and (min-aspect-ratio: 1/1) {

    .article{
        padding: 10vh 2vw;
    }

    .article .main-img img{
        height: 30vh;
    }

    .article .highlight{
        padding: 3vh 3vw;
    }
}