import styled from 'styled-components'
import {rem} from '../style/function.style'


export const ProductListContainer  = styled.div`
    margin: auto;
    .product-list-wrap{
        width: ${rem(702)};
        padding: ${rem(24)} ${rem(24)} 0 ${rem(24)};
        margin-left: auto;
        margin-right: auto;
        background: #FFF;
        box-shadow: 0 ${rem(2)} ${rem(30)} 0 rgba(150,150,150,0.11);
        border-radius: ${rem(16)};
        -webkit-border-radius: ${rem(16)};
    }
    .list{
       margin-right: -${rem(24)};
    }
    .list-1{
        margin-right: 0;
    }
    .title-wrap{
        padding-top: ${rem(16)};
    }
    .list-1 .title-wrap{
        padding-bottom: ${rem(16)};
    }
    .product-item{
        display: inline-block;
        vertical-align: top;
        margin: 0 ${rem(24)} ${rem(24)} 0;
    }
    .product-item-1{
        padding: ${rem(24)} 0;
        :not(:last-child){
            border-bottom: ${rem(1)} solid #EFEFEF;
        }
    }
`