diff --git a/src/style/modules/_post-card.scss b/src/style/modules/_post-card.scss index 1e41804..6635864 100644 --- a/src/style/modules/_post-card.scss +++ b/src/style/modules/_post-card.scss @@ -1,22 +1,53 @@ .post-card { + display: grid; + grid-template-columns: 40% 60%; + align-items: baseline; + height: 100%; width: 100%; height: 100%; max-width: 333px; max-height: 222px; + padding: clamp(12px, 1.5vw, 32px); + padding-left: clamp(8px, 1vw, 24px); background: $color-cream; + box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2); - .wrap { + &__left { display: flex; + align-items: flex-end; height: 100%; - padding: 40px 20px; + padding-bottom: 4px; + padding-right: clamp(8px, 1vw, 24px); + border-right: 1px solid rgba(#000, 0.2); + } + &__right { + position: relative; + margin-top: auto; + height: 100%; + display: flex; + align-items: flex-end; + } + + // Country Title + &__country { + position: relative; + margin-top: auto; + font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(32px)}); + color: $color-primary; + font-family: $font-serif; + line-height: 1.1; + + strong { + color: $color-secondary; + font-weight: 300; + } } // Stamp &__stamp { position: absolute; - top: 20px; - right: 20px; - flex-shrink: 0; + top: 0; + right: 0; img { display: block; @@ -28,7 +59,7 @@ position: absolute; top: 10px; left: -8px; - transform: rotate(-16deg); + transform: rotate(-14deg); width: 24px; height: 24px; box-shadow: 0 0 0 3px $color-cream; @@ -36,6 +67,7 @@ overflow: hidden; img { + display: block; width: 100%; height: 100%; object-fit: contain; @@ -43,46 +75,18 @@ } } - // Country Title - &__country { - position: relative; - min-width: 105px; - margin-top: auto; - margin-right: 15px; - font-size: rem(20px); - color: $color-primary; - font-family: $font-serif; - line-height: 1.1; - - strong { - color: $color-secondary; - font-weight: 300; - } - } - - // Border Line - &__border { - background-color: rgba(#000, 0.2); - height: 180px; - width: 1px; - margin-top: auto; - } - // Address ul { - width: 60%; margin-top: auto; - margin-left: 20px; + padding-left: clamp(8px, 1vw, 24px); li { display: block; - border-bottom: 1px solid #D9CABD; - margin-bottom: 2px; - } - p { + margin-bottom: max(2px, 0.25vw); color: $color-text; - font-size: rem(14px); + font-size: clamp(#{rem(11px)}, 0.8vw, #{rem(24px)}); line-height: 1.4; + border-bottom: 1px solid #D9CABD; } } } \ No newline at end of file