.layout-content-body {
    max-width: 1280px;
}

.mobile-mode {
    display: none;
}

.m-card {
    /* border-style: groove; */
    max-width: 1280px;
    display: flex;
    margin: 1% auto 2% auto;
    padding: 2%;
}

.card-l {
    display: block;
    float: left;
    padding: 2%;
    width: 50%;
}

.card-r {
    display: block;
    float: right;
    padding: 2%;
    width: 50%;
}

.reference-body {
    margin: 0px;
    background-color: rgb(240, 240, 240);
    width: 100%;
    height: 80px;
}

.references {
    display: flex;
    max-width: 1280px;
    margin: 1% auto 1% auto;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

.references div {
    margin: 18px 5% 0px 5%;
    opacity: 0.5;
}

.card-border {
    background-color: rgb(248, 248, 248);
    border-radius: 20px;
}


@media screen and (max-width: 992px) {

    .desktop-mode {
        display: none;
    }

    .mobile-mode {
        display: block;
    }

    .m-card {
        /* border-style: groove; */
        max-width: 95%;
        display: block;
        height: auto;
        margin: 1% auto 2% auto;
        padding: 2%;
    }

    .card-l {
        display: block;
        float: none;
        padding: 2%;
        width: 100%;
        height: auto;
    }
    
    .card-r {
        display: block;
        float: none;
        padding: 2%;
        width: 100%;
        height: auto;
    }

}