main {
    margin-bottom: 60px;

}

h1{
    font: var(--span);
    color: var(--text-color-sec);
}



#featured{
    
    img {
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }

    .card {

        overflow: hidden;
        position: relative;

        &::before {
            content: "";
            border-radius: 4px;
            position: absolute;
            inset: 0;
            top: 50%;
            background:linear-gradient(
             180deg,
             transparent 0%,
             #020617 100%  
            );
            

        }
        Figcaption:has(.text-lg) {
            padding: 12px

        }
        Figcaption {

            position: absolute;
            bottom: 0;
            padding: 24px;

            h2 {
                margin-top: 8px;
            }
        }
    }
}

#moreread>div {
   
    span {
        position: absolute;
        margin-top: 8px;
        margin-left: 8px;   
    }

    img {
        height: 160px;
        width: 292px;
    }

    p {
      font:var(--h2);
      color: var(--text-color-pm);  
    }
}

.board-1 {

    p{
        font: var(--text);
        color: var(--text-color-sec);
    }

    span {
        margin-bottom: 8px;
    }

   

}

article {

   
    display: grid;
    grid-template-columns: 79px 390px;
    gap: 15px;

    img {
        object-fit: cover;
        height: 100%;
    }
    span {
        margin-bottom: 8px;
    }
}

.width{
    width: 79.20px;
}






.img{
    
    position: relative;

    
    div{
        position: absolute;

        img {
            border-radius: 4px;
        }
    }

    span{
        position: absolute;
        width: 20px;
        right: 8px;
        top: 8px;

    }
}