@media all {
    /* overrides */
    body { background-color:var(--color-light-gray); }

    /* services */
    #services { text-align:center; background-color:var(--color-light-gray); }
    #services p.instructions { font-size:var(--font-size-0); font-weight:var(--font-weight-bold); }
    #services h2 { margin-bottom:var(--spacing-3L); font-size:var(--font-size-3L); font-weight:var(--font-weight-bold); }

    #services ul.service_list { grid-template-columns:repeat(3, 1fr); gap:var(--spacing-1L); }
    #services ul.service_list li { position:relative; }
    #services ul.service_list li:hover img { transform: rotateY(180deg); transition: transform 0.6s ease; }

    #services ul.service_list a { position:absolute; top:0px; right:0px; bottom:0px; left:0px; border:4px var(--color-dark-gray) solid; border-radius:var(--spacing-1S); transition: all 0.3s ease; z-index:1; }
    #services ul.service_list a:hover,
    #services ul.service_list a:focus { border-color:var(--color-blue); box-shadow: 0px 0px 43px -3px rgba(0,0,0,0.2); }

    #services ul.service_list .body { padding:var(--spacing-2L) var(--spacing-1L); text-align:center; background-color:var(--color-white); border-radius:var(--spacing-1S); }
    #services ul.service_list .body img { margin:0px auto var(--spacing-1L) auto; width:calc(var(--font-size-5L) * 1.4); height:calc(var(--font-size-5L) * 1.4); object-fit:contain; transition: transform 0.6s ease;}
    #services ul.service_list .body p { margin:0px auto; font-size:var(--font-size-0); font-weight:var(--font-weight-bold); line-height:1; }
}

@media (max-width:1400px) {

}

@media (max-width:1200px) {

}

@media (max-width:1000px) {

}

@media (max-width:800px) {
    #services ul.service_list { margin:0px auto; width:70%; min-width:280px; grid-template-columns:1fr; }
    #services ul.service_list .body { padding: var(--spacing-4L) var(--spacing-1L); }
}

@media (max-width:600px) {

}