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

// const rem = px => (px/75).toFixed(1)
export const Container = styled.div`
  padding: ${rem(40)} ${rem(32)} 0 ${rem(32)};
  .title {
    font-weight: bold;
    font-size: ${rem(34)};
    color: #444444;
    line-height: ${rem(44)};
    padding-bottom: ${rem(32)};
  }
  .list-con {
    overflow: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .item {
      float: left;
      width: ${rem(328)};
      height: ${rem(328)};
      position: relative;
      margin-bottom: ${rem(24)};
      &:nth-of-type(2n) {
        float: right;
      }
      .cover {
        /* width: ${rem(280)}; */
        height: ${rem(210)};
        border-radius: ${rem(8)};
        background-color: #eee;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-size: cover;
      }
      .like-icon {
        font-size: ${rem(20)};
        color: #FFFFFF;
        letter-spacing: 1px;
        position: absolute;
        top: ${rem(10)};
        right: ${rem(10)};
        padding: 0 ${rem(12)};
        background: rgba(6,6,6,0.77);
        border-radius: ${rem(20)};
        .icon {
          margin-left: ${rem(4)};
          width: ${rem(20)};
        }
      }
      p {
        font-size: ${rem(27)};
        color: #444444;
        line-height: ${rem(40)};
        max-height: ${rem(80)};
        margin-top: ${rem(22)};
        width: ${rem(280)};
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
      }
    }
  }
`

export const Divider = styled.div`
  margin-left: -${rem(32)};
  margin-right: -${rem(32)};
  margin-top: ${rem(40)};
  height: ${rem(16)};
  background-color: #f6f6f6;
`