.productCardWarpper { max-width: 22.4rem; min-height: 31.8rem; padding: 1.2rem 1.2rem 0 1.2rem; margin: auto; margin-bottom: 1px; @apply flex flex-col justify-between; &.notSell { @apply justify-center; } .cardTop { @apply relative; height: 13.8rem; width: 100%; .productImage { height: 100%; width: 100%; @apply flex justify-center items-center; img { @apply inline; } &:hover { cursor: pointer; } } .productLabel { @apply absolute left-0 bottom-0; } } .cardMid { min-height: 10.4rem; @apply flex flex-col justify-between; .cardMidTop { .productname { font-weight: bold; color: var(--text-active); &:hover { cursor: pointer; } } .productWeight { font-size: 1.2rem; line-height: 2rem; letter-spacing: 0.01em; color: var(--text-base); } } .cardMidBot { padding-top: 0.8rem; @apply flex justify-between items-center border-t border-solid border-line; .productPrice { @apply font-bold; font-size: 2rem; line-height: 2.8rem; letter-spacing: -0.01em; } } } .cardBot { min-height: 4rem; @apply flex justify-between items-center; .cardIcon { margin-right: 0.8rem; } .cardButton { button { > div { span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow-y: hidden; text-overflow: ellipsis; } } } } } }