#body
{
    main
    {

        article
        {
            ul
            {
                display: flex;
                flex-wrap:wrap;
                li
                {
                    a
                    {
                        display: block;
                        picture
                        {
                            display: block;
                            width: 100%;
                            overflow: hidden;
                            padding-top:100%;
                            position: relative;
                            img
                            {
                                position: absolute;
                                top:10%;
                                left: 10%;
                                display: block;
                                width: 80%;
                                transition-duration:.5s;
                            }
                        }
                        div
                        {
                            text-align: center;
                            span
                            {
                                display: block;
                                &.title
                                {
                                    color:#333;
                                    margin-bottom: 20px;
                                    font-family: 'Microsoft YaHei','微軟正黑體';
                                }
                                &.price
                                {
                                    color:#000;
                                    font-size:16px;
                                    font-family: 'Arial Black','微軟正黑體';
                                }
                            }
                        }
                        &:hover
                        {
                            picture
                            {
                                img
                                {
                                    transform: scale(1.1);
                                }
                            }
                        }
                    }
                    @media(min-width:980px)
                    {
                        width: calc((100% - 120px) / 4);
                        margin:0 20px 40px 20px;
                        &:nth-child(4n)
                        {
                            margin-right:0px;
                        }
                        &:nth-child(4n + 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;
                        }
                    }
                }
            }
        }
    }
}