#body
{

    main ul
    {
        display: flex;
        flex-wrap:wrap;
        li
        {
            a
            {
                display: block;
                picture
                {
                    padding-top:175.7%;
                    display: block;
                    position: relative;
                    width: 100%;
                    overflow: hidden;
                    img
                    {
                        position: absolute;
                        top:0px;
                        left: 0px;
                        width: 100%;
                        transition-duration:.5s;
                    }
                }
            }
            div
            {
                padding-left:20px;
                position: relative;
                span
                {
                    display: block;
                    line-height: 30px;
                    color:#666;
                }
                &::after
                {
                    transition: all .2s ease-out 0s;
                    position: absolute;
                    top: calc(40%);
                    left: 0;
                    content: ' ';
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 5px 0 5px 8.7px;
                    border-color: transparent transparent transparent #666;
                    transition-duration:.5s;
                }
                &::before
                {
                    height: 1px;
                    width: 0;
                    position: absolute;
                    top:50%;
                    left: 20px;
                    background: $main-color;
                    content: ' ';
                    opacity: 0;
                    transition-duration:.5s;
                }
            }
            &:hover
            {
                picture
                {
                    img
                    {
                        transform: scale(1.1);
                    }
                }
                div
                {
                    &::after
                    {
                        border-color: transparent transparent transparent $main-color;
                    }
                    &::before
                    {
                        opacity: 1;
                        width: calc(100% - 20px);
                    }
                }
            }
            @media(min-width:980px)
            {
                width: calc(91% / 4);
                margin-left:1.5%;
                margin-right:1.5%;
                margin-bottom:3%;
                &:nth-child(4n)
                {
                    margin-right:0px;
                }
                &:nth-child(4n + 1)
                {
                    margin-left: 0px;
                }
            }
            @media(max-width:979px)
            {
                width: calc(50% - 5px);
                margin:0 5px 10px 5px;
                &:nth-child(2n)
                {
                    margin-right:0px;
                }
                &:nth-child(2n + 1)
                {
                    margin-left: 0px;
                }
            }
        }
    }
}