html body div section#cordonnerie > div.service,
html body div section#serrurerie > div.service,
html body div section#gravure > div.service,
html body div section#others-services > div.service
{
    display: flex;
    align-items: center;
    justify-content: space-between;

    text-align: center;
}

html body div section#cordonnerie > div.flex-reversed,
html body div section#serrurerie > div.flex-reversed,
html body div section#gravure > div.flex-reversed,
html body div section#others-services > div.flex-reversed
{
    flex-direction: row-reverse;
}

html body div section#cordonnerie div.service > img,
html body div section#serrurerie div.service > img,
html body div section#gravure div.service > img,
html body div section#others-services div.service > img
{
    width: auto;
    height: 25rem;

    border-radius: 1rem;
}

html body div section#cordonnerie div.service > div,
html body div section#serrurerie div.service > div,
html body div section#gravure div.service > div,
html body div section#others-services div.service > div
{
    padding: 2rem;
}

html body div section#cordonnerie-icons > div,
html body div section#serrurerie-icons > div,
html body div section#gravure-icons > div,
html body div section#others-services-icons > div
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

html body div section#cordonnerie-icons div > div.named-icon,
html body div section#serrurerie-icons div > div.named-icon,
html body div section#gravure-icons div > div.named-icon,
html body div section#others-services-icons div > div.named-icon
{
    text-align: center;
}

html body div section#cordonnerie-icons div div.named-icon > img,
html body div section#serrurerie-icons div div.named-icon > img,
html body div section#gravure-icons div div.named-icon > img,
html body div section#others-services-icons div div.named-icon > img
{
    width: auto;
    height: 5rem;
}

html body div section#cordonnerie-icons div div.named-icon > p,
html body div section#serrurerie-icons div div.named-icon > p,
html body div section#gravure-icons div div.named-icon > p,
html body div section#others-services-icons div div.named-icon > p
{
    color: rgb(255, 255, 255);
}

@media screen and (max-width: 600px)
{
    html body div section#cordonnerie > div.service,
    html body div section#serrurerie > div.service,
    html body div section#gravure > div.service,
    html body div section#others-services > div.service
    {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        text-align: center;
    }
}