#body
{
    main
    {
        aside
        {

            >ul
            {
                font-weight: 100;
                border-radius: 10px;
                padding:20px;
                background: #f1f1f1;
                letter-spacing: 2px;
                >li
                {
                    padding:10px 0;
                    >a
                    {
                        color:#666;
                        text-shadow: 0 0 1px #666;
                        font-size: 15px;
                    }

                    >ul
                    {
                        display: none;
                        padding:10px;
                        li
                        {
                            a
                            {
                                display: block;
                                padding:10px;
                                color:#666;
                                font-size: 14px;
                            }
                        }
                    }
                    &.active
                    {
                        >a
                        {
                            font-weight: 600;
                            color:#000;
                        }
                        >ul
                        {
                            display: block;
                        }
                    }
                }
            }
        }
        article
        {
            ul
            {
                display: flex;
                flex-wrap:wrap;
                li
                {
                    a
                    {
                        display: block;
                        picture
                        {
                            display: block;
                            position: relative;
                            overflow: hidden;
                            padding-top:58.3%;
                            width: 100%;
                            img
                            {
                                position: absolute;
                                top:0px;
                                left: 0px;
                                display: block;
                                width: 100%;
                            }
                        }
                    }
                    @media(min-width:980px)
                    {
                        width: calc(90% / 3);
                        margin:0 2.5% 5% 2.5%;
                        &:nth-child(3n)
                        {
                            margin-right: 0px;
                        }
                        &:nth-child(3n + 1)
                        {
                            margin-left:0px;
                        }
                    }
                    @media(max-width:979px)
                    {
                        width: calc(50% - 10px);
                        margin:0 10px 20px 10px;
                        &:nth-child(2n)
                        {
                            margin-right: 0px;
                        }
                        &:nth-child(2n + 1)
                        {
                            margin-left:0px;
                        }
                    }
                }

            }
        }
        @media(min-width:980px)
        {
            display: flex;
            aside
            {
                width: 200px;
            }
            article
            {
                padding-left: 50px;
                width: calc(100% - 200px);
            }
        }

    }
}