:root{
    --primary :#000000;
    --bodycolor :#f0ffff;
    --white : #fff;
    --black : #000;
}
#tbmatch, #articles{
    width: 90%;
    height: auto;
    background-color: var(--white);
    margin: 8px auto;
    padding: 8px;
    border-radius: 6px;
}
#articles h2{
    font-size: 20px;
}
#article {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 14px;
    gap: 12px;
}
#blog{
    text-align: center;
    border: solid #8c52ff 2px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bodycolor);
}
#blog img{
    width: 100%;
    /* border-radius: 8px;
    mask: url("/kooragoal/images/pain.webp") center / 100% no-repeat;
    transition: mask-size 0.75s ease-in-out;
    transition-delay: 0.25s; */
}
/* #blog img:hover{
    mask-size: 350%;
    transition-delay: 0s;
} */
#blog h3{
    font-size: 14px;
}
#blog a{
    color: var(--black);
    text-decoration: none;
}
#blog a:hover{
    color: var(--primary);
}

/* responsive */
@media (max-width: 768px){
    #article {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 14px;
    }
    #blog h3{
        font-size: 16px;
    }
}
@media (max-width: 500px){
    #article{
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 600px)  {
    #tbmatch, #articles {
        width: 100%;
    }
}