mor-itemlist{
    display: block;
    vertical-align: middle;

    > mor-ul{
        list-style: none;

        > li{
            font-size: 0;

            &:first-child{
                margin-top: 0;
            }

            &:last-child{
                padding-bottom: 0;
            }

            > *:not(.img){
                box-sizing: border-box;
                float: right;
                display: block;
            }

            > *:first-child:not(.img){
                width: 100%;

                ~ *{
                    width: 100%;
                }
            }

            > mor-img{
                float: left;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            > .title{
                font-weight: 700;
                margin: 0;
                line-height: initial;
            }

            > .desc{
                margin: 0.3em 0 0 !important;
                color: darken(@colorComponentItemFont, 12%);
                line-height: 1em;
            }

            > .body{
                color: @colorBlack;
                margin: 0.6em 0 0.8em !important;
                line-height: 1em;
            }

            > .additional{
                color: @colorComponentItemFont;
                line-height: 1em;
            }

            &::after{
                content: ' ';
                height: 0;
                display: block;
                clear: both;
            }
        }
    }

    &.underline > mor-ul > li{
        border-bottom: 1px @colorComponentItemBorder solid;

        &:last-child{
            border-bottom: none;
        }
    }

    &.si-xxl{
        > mor-ul > li{
            margin-top: @fontSize*0.8 !important;
            padding-bottom: @fontSize*0.8;
        }

        > mor-ul > li > *:not(.img){
            width: calc(100% - @fontSize*9);
            padding: 0 6%;
        }

        > mor-ul > li > mor-img{
            height: @fontSize*9;
            width: @fontSize*9;
        }

        > mor-ul > li > .title{
            font-size: @fontSize*2.2;
        }

        > mor-ul > li > .desc{
            font-size: @fontSize;
            margin: 0.4em 0 0 !important;
        }

        > mor-ul > li > .body{
            font-size: @fontSize*1.2;
            margin: 1em 0 1.2em !important;
        }

        > mor-ul > li > .additional{
            font-size: @fontSize*0.8125;
        }

        > mor-ul > li > mor-img + .title:last-child{
            height: @fontSize*9;
            font-size: @fontSize*4.4;
            padding: 0 9%;
        }

        > mor-ul > li > mor-img + .body{
            height: @fontSize*9;
            font-size: @fontSize*4;
            padding: 0 9%;
        }
    }

    &.si-xl{
        > mor-ul > li{
            margin-top: @fontSize*0.8 !important;
            padding-bottom: @fontSize*0.8;
        }

        > mor-ul > li > *:not(.img){
            width: calc(100% - @fontSize*8);
            padding: 0 5%;
        }

        > mor-ul > li > mor-img{
            height: @fontSize*8;
            width: @fontSize*8;
        }

        > mor-ul > li > .title{
            font-size: @fontSize*1.8;
        }

        > mor-ul > li > .desc{
            font-size: @fontSize*0.8125;
            margin: 0.4em 0 0 !important;
        }

        > mor-ul > li > .body{
            font-size: @fontSize;
            margin: 0.8em 0 1em !important;
        }

        > mor-ul > li > .additional{
            font-size: @fontSize*0.8125;
        }

        > mor-ul > li > mor-img + .title:last-child{
            height: @fontSize*8;
            font-size: @fontSize*3.6;
            padding: 0 8%;
        }

        > mor-ul > li > mor-img + .body{
            height: @fontSize*8;
            font-size: @fontSize*3.2;
            padding: 0 8%;
        }
    }

    &.si-l{
        > mor-ul > li{
            margin-top: @fontSize*0.6 !important;
            padding-bottom: @fontSize*0.6;
        }

        > mor-ul > li > *:not(.img){
            width: calc(100% - @fontSize*7);
            padding: 0 4%;
        }

        > mor-ul > li > mor-img{
            height: @fontSize*7;
            width: @fontSize*7;
        }

        > mor-ul > li > .title{
            font-size: @fontSize*1.4;
        }

        > mor-ul > li > .desc{
            font-size: @fontSize*0.8125;
            margin: 0.4em 0 0 !important;
        }

        > mor-ul > li > .body{
            font-size: @fontSize*0.8125;
            margin: 0.8em 0 1em !important;
        }

        > mor-ul > li > .additional{
            font-size: @fontSize*0.8125;
        }

        > mor-ul > li > mor-img + .title:last-child{
            height: @fontSize*7;
            font-size: @fontSize*3.2;
            padding: 0 7%;
        }

        > mor-ul > li > mor-img + .body{
            height: @fontSize*7;
            font-size: @fontSize*2.8;
            padding: 0 7%;
        }
    }

    &.si-m{
        > mor-ul > li{
            margin-top: @fontSize*0.5 !important;
            padding-bottom: @fontSize*0.5;
        }

        > mor-ul > li > *:not(.img){
            width: calc(100% - @fontSize*6);
            padding: 0 3.5%;
        }

        > mor-ul > li > mor-img{
            height: @fontSize*6;
            width: @fontSize*6;
        }

        > mor-ul > li > .title{
            font-size: @fontSize*1;
        }

        > mor-ul > li > .desc{
            font-size: @fontSize*0.75;
        }

        > mor-ul > li > .body{
            font-size: @fontSize*0.75;
        }

        > mor-ul > li > .additional{
            font-size: @fontSize*0.75;
        }

        > mor-ul > li > mor-img + .title:last-child{
            height: @fontSize*6;
            font-size: @fontSize*2.8;
            padding: 0 6%;
        }

        > mor-ul > li > mor-img + .body{
            height: @fontSize*6;
            font-size: @fontSize*2.4;
            padding: 0 6%;
        }
    }

    &.si-s{
        > mor-ul > li{
            margin-top: @fontSize*0.4 !important;
            padding-bottom: @fontSize*0.4;
        }

        > mor-ul > li > *:not(.img){
            width: calc(100% - @fontSize*5);
            padding: 0 2.5%;
        }

        > mor-ul > li > mor-img{
            height: @fontSize*5;
            width: @fontSize*5;
        }

        > mor-ul > li > .title{
            font-size: @fontSize*1;
        }

        > mor-ul > li > .desc{
            font-size: @fontSize*0.75;
        }

        > mor-ul > li > .body{
            font-size: @fontSize*0.75;
        }

        > mor-ul > li > .additional{
            font-size: @fontSize*0.75;
        }

        > mor-ul > li > mor-img + .title:last-child{
            height: @fontSize*5;
            font-size: @fontSize*2.4;
            padding: 0 5%;
        }

        > mor-ul > li > mor-img + .body{
            height: @fontSize*5;
            font-size: @fontSize*2;
            padding: 0 5%;
        }
    }

    &.si-xs{
        > mor-ul > li{
            margin-top: @fontSize*0.3 !important;
            padding-bottom: @fontSize*0.3;
        }

        > mor-ul > li > *:not(.img){
            width: calc(100% - @fontSize*4);
            padding: 0 2%;
        }

        > mor-ul > li > mor-img{
            height: @fontSize*4;
            width: @fontSize*4;
        }

        > mor-ul > li > .title{
            font-size: @fontSize*0.75;
        }

        > mor-ul > li > .desc{
            font-size: @fontSize*0.75;
            margin: 0.1em 0 0 !important;
        }

        > mor-ul > li > .body{
            font-size: @fontSize*0.75;
            margin: 0.3em 0 0.4em !important;
        }

        > mor-ul > li > .additional{
            font-size: @fontSize*0.6;
        }

        > mor-ul > li > mor-img + .title:last-child{
            height: @fontSize*4;
            font-size: @fontSize*2;
            padding: 0 4%;
        }

        > mor-ul > li > mor-img + .body{
            height: @fontSize*4;
            font-size: @fontSize*1.6;
            padding: 0 4%;
        }
    }

    &.si-xxs{
        > mor-ul > li{
            margin-top: @fontSize*0.2 !important;
            padding-bottom: @fontSize*0.2;
        }

        > mor-ul > li > *:not(.img){
            width: calc(100% - @fontSize*3);
            padding: 0 1.5%;
        }

        > mor-ul > li > mor-img{
            height: @fontSize*3;
            width: @fontSize*3;
        }

        > mor-ul > li > .title{
            font-size: @fontSize*0.75;
            margin-top: -0.3em;
        }

        > mor-ul > li > .desc{
            font-size: @fontSize*0.75;
            margin: 0 !important;
        }

        > mor-ul > li > .body{
            font-size: @fontSize*0.75;
            margin: 0.1em 0 !important;
        }

        > mor-ul > li > .additional{
            font-size: @fontSize*0.75;
        }

        > mor-ul > li > mor-img + .title:last-child{
            height: @fontSize*3;
            font-size: @fontSize*1.6;
            padding: 0 3%;
        }

        > mor-ul > li > mor-img + .body{
            height: @fontSize*3;
            font-size: @fontSize*1.2;
            padding: 0 3%;
        }
    }

    &,
    &.si-xxl,
    &.si-xl,
    &.si-l,
    &.si-m,
    &.si-s,
    &.si-xs,
    &.si-xxs{
        > mor-ul > li > mor-img + .title:last-child{
            display: flex;
            margin: 0 !important;
            align-items: center;
        }

        > mor-ul > li > mor-img + .body{
            display: flex;
            margin: 0 !important;
            align-items: center;
        }
    }

    // default status
    &{
        .si-m;
    }
}