diff --git a/src/components/ProductCard/ProductCard.module.css b/src/components/ProductCard/ProductCard.module.css index 2eba1e4c..bf735d01 100644 --- a/src/components/ProductCard/ProductCard.module.css +++ b/src/components/ProductCard/ProductCard.module.css @@ -1,20 +1,37 @@ +/* PC 스타일: 1200px 이상 */ @media (min-width: 1200px) { - .card { - --card-width: 261px; /* 데스크탑 크기 */ + :root { + --card-width: 261px; --card-height: 370px; + --card-small-width: 215px; + --card-small-height: 311px; } } -@media (min-width: 375px) and (max-width: 1199.98px) { - .card { - --card-width: 343px; /* 태블릿 & 모바일 크기 */ +/* Tablet 스타일: 744px 이상 ~ 1199px 이하 */ +@media (min-width: 744px) and (max-width: 1199.98px) { + :root { + --card-width: 343px; --card-height: 434px; + --card-small-width: 215px; + --card-small-height: 311px; + } +} + +/* Mobile 스타일: 375px 이상 ~ 743px 이하 */ +@media (min-width: 375px) and (max-width: 743.98px) { + :root { + --card-width: 343px; + --card-height: 434px; + --card-small-width: 168px; + --card-small-height: 264px; } } .card { width: var(--card-width); height: var(--card-height); + border: 1px solid red; } .image { @@ -22,8 +39,34 @@ height: var(--card-width); object-fit: cover; margin-bottom: 16px; + border-radius: 16px; +} + +/* ------------------------ */ + +.card.small { + width: var(--card-small-width); + height: var(--card-small-height); + margin-bottom: 40px; + /* Mobile 스타일: 375px 이상 ~ 743px 이하 */ + @media (min-width: 375px) and (max-width: 743.98px) { + margin-bottom: 32px; + } +} + +.card.small > .image { + width: var(--card-small-width); + height: var(--card-small-width); + object-fit: cover; + margin-bottom: 14px; } +.card.small .price { + line-height: 3.7rem; +} + +/* ------------------------ */ + .name { font-size: 1.4rem; line-height: 2.4rem; @@ -72,22 +115,3 @@ font-weight: 500; font-size: 1.2rem; } - -/* ------------------------ */ - -.card.small { - width: 215px; - height: 311px; - margin-bottom: 40px; -} - -.card.small > .image { - width: 215px; - height: 215px; - object-fit: cover; - margin-bottom: 14px; -} - -.card.small .price { - line-height: 3.7rem; -}