:root{
    --primary :#05224d;
    --bodycolor :#f0ffff;
    --white : #fff;
    --black : #000;
}

/* تثبيت مساحة جدول المباريات في الحاسوب لمنع الانزياح (CLS Fix) */
#tbmatch {
    width: 90%;
    min-height: 300px;
    background-color: var(--white);
    margin: 8px auto;
    padding: 8px;
    border-radius: 6px;
    contain: layout style;
}

#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%;
}

#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%;
    }
}

/*____________ sms _______________________*/

/* يظهر فقط على الحاسوب مع تثبيت الأبعاد منعاً للـ CLS */
@media only screen and (min-width: 768px) {
    div#sms {
        border-radius: 8px;
        width: 90%;
        min-height: 60px;
        padding: 12px;
        background: #ffffff;
        margin: 13px auto;
        text-align: center;
        contain: layout style;
    }
}

/* إخفاؤه على الهاتف */
@media only screen and (max-width: 767px) {
    div#sms {
        display: none;
    }
}