diff --git a/src/style/modules/_postcard.scss b/src/style/modules/_postcard.scss
index e329dd0..fb287f0 100644
--- a/src/style/modules/_postcard.scss
+++ b/src/style/modules/_postcard.scss
@@ -8,9 +8,10 @@
height: 100%;
max-width: 333px;
max-height: 222px;
- padding: clamp(12px, 1vw, 20px);
- padding-left: var(--gap);
+ padding-top: clamp(12px, 1vw, 20px);
padding-right: calc(var(--gap) * 2);
+ padding-bottom: clamp(12px, 1.25vw, 32px);
+ padding-left: var(--gap);
background: $color-cream;
box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2);
@@ -34,11 +35,18 @@
&__country {
position: relative;
margin-top: auto;
- font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(22px)});
+ font-size: clamp(#{rem(14px)}, 2vw, #{rem(22px)});
color: $color-primary;
font-family: $font-serif;
line-height: 1.1;
+ @include bp (sm) {
+ font-size: clamp(#{rem(14px)}, 2.5vw, #{rem(22px)});
+ }
+ @include bp (sd) {
+ font-size: clamp(#{rem(14px)}, 1.35vw, #{rem(22px)});
+ }
+
strong {
color: $color-secondary;
font-weight: 300;
@@ -57,6 +65,9 @@
height: auto;
}
+ .frame {
+ width: 32px;
+ }
.flag {
position: absolute;
top: 10px;
@@ -69,8 +80,6 @@
overflow: hidden;
img {
- display: block;
- width: 100%;
height: 100%;
object-fit: contain;
}
@@ -87,9 +96,91 @@
display: block;
margin-bottom: clamp(2px, 0.25vw, 4px);
color: $color-text;
- font-size: clamp(#{rem(11px)}, 0.8vw, #{rem(16px)});
+ font-size: clamp(#{rem(11px)}, 1.2vw, #{rem(16px)});
line-height: 1.4;
border-bottom: 1px solid #D9CABD;
+
+ @include bp (sd) {
+ font-size: clamp(#{rem(12px)}, 0.8vw, #{rem(16px)});
+ }
+ }
+ }
+
+
+
+ /*
+ ** Variants
+ */
+ // Small size
+ &--small {
+ opacity: 1 !important;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ transform: none !important;
+ max-width: 100%;
+ max-height: 100%;
+ grid-template: 1fr 2fr / 1fr;
+ padding: 12px;
+
+ ul {
+ padding-left: 0;
+ }
+
+ .postcard {
+ // Country
+ &__left {
+ height: auto;
+ border: none;
+ margin: auto 0;
+ padding-right: 40px;
+
+ br {
+ display: none;
+ }
+ }
+ &__country {
+ font-size: clamp(#{rem(12px)}, 3.25vw, #{rem(24px)});
+
+ @include bp (sm) {
+ font-size: clamp(#{rem(12px)}, 1.75vw, #{rem(20px)});
+ }
+ @include bp (sd) {
+ font-size: clamp(#{rem(12px)}, 1.5vw, #{rem(22px)});
+ }
+ }
+
+ // Infos
+ &__right {
+ position: static;
+
+ .flag {
+ width: 18px;
+ height: 18px;
+ }
+ }
+ &__stamp {
+ top: 8px;
+ right: 8px;
+
+ .frame {
+ width: 28px;
+ }
+ }
+ &__address {
+ li {
+ font-size: clamp(#{rem(10px)}, 2vw, #{rem(16px)});
+
+ @include bp (sm) {
+ font-size: clamp(#{rem(11px)}, 1.1vw, #{rem(16px)});
+ }
+ @include bp (sd) {
+ font-size: clamp(#{rem(11px)}, 0.9vw, #{rem(16px)});
+ }
+ }
+ }
}
}
}
\ No newline at end of file
diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss
index ba75472..5cfd045 100644
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -325,6 +325,10 @@
opacity: 0;
transform: translate3d(12%, 23%, 0) rotate(-5deg);
transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart);
+
+ &--small {
+ border-radius: 0;
+ }
}
// Show postcard on hover