/*#region div.site-services */
div.site-services {
    margin: 100px 10%;
}

div.site-services > ul {
    display: grid;
    list-style-type: none;
    gap: 80px;
    padding:0;
    margin:0;
}

div.site-services > ul > li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

div.site-services > ul > li:nth-child(2n) {
    direction: rtl;
}

div.site-services > ul > li > img {
    width: 100%;
    border-radius: 20px;
    box-shadow: rgba(0,0,0,.5) 1px 1px 20px;
}

div.site-services > ul > li > div {
    direction: ltr;
}

div.site-services > ul > li > div > h3 {
    color: var(--main-color);
    font-size: 24px;
}

div.site-services > ul > li > div > p {
    color: #999;
    font-size: 13px;
    padding: 0;
    text-align: justify;
}

div.site-services ol {
    list-style-type: none;
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    font-size: 15px;
}

/*#endregion */


/*#region responsive */

/* Monitor */
@media (min-width: 768px) and (max-width: 992px) {
    div.site-services {
        margin: 100px 5%;
    }

    div.site-services > ul {
        gap: 40px;
    }

    div.site-services > ul > li {
        gap: 30px;
    }

    div.site-services ol {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

}

/* Tablet */
@media (min-width: 576px) and (max-width: 768px) {
    div.site-services {
        margin: 100px 2%;
    }

    div.site-services > ul {
        gap: 40px;
    }

    div.site-services > ul > li {
        gap: 30px
    }
 
    div.site-services > ul > li > div > h3 {
        font-size: 20px;
    }

    div.site-services > ul > li > div > p {
        font-size: 12px;
    }

    div.site-services ol {
        font-size: 13px;
        grid-template-columns: 1fr 1fr;
    }

}

/* Phone */
@media (max-width: 576px) {
    div.site-services {
        margin: 10px 10px;
    }

    div.site-services > ul {
        gap: 20px;
    }

    div.site-services > ul > li {
        grid-template-columns: auto;
        gap: 20px;
        background-color: #88888811;
        border-radius: 20px;
        overflow: hidden;
        padding-bottom: 15px;
    }
 
    div.site-services > ul > li > div > h3 {
        font-size: 18px;
        text-align: center;
    }

    div.site-services > ul > li > div > p {
        font-size: 12px;
        padding: 0 15px
    }
    
    div.site-services > ul > li > img {
    border-radius: 20px 20px 0 0 ;
    box-shadow: rgba(0,0,0,.5) 1px 1px 20px;
}

    div.site-services ol {
        font-size: 13px;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 0 15px;
    }

}

/*#endregion */