.postcard {
    --gap: clamp(8px, 0.7vw, 20px);
    display: grid;
    grid-template-columns: min(140px, 40%) 1fr;
    align-items: baseline;
    height: 100%;
    width: 100%;
    height: 100%;
    max-width: 333px;
    max-height: 222px;
    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);

    &__left {
        display: flex;
        align-items: flex-end;
        height: 100%;
        padding-bottom: 4px;
        padding-right: var(--gap);
        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(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;
        }
    }

    // Stamp
    &__stamp {
        position: absolute;
        top: 0;
        right: 0;

        img {
            display: block;
            width: 100%;
            height: auto;
        }

        .frame {
            width: 32px;
        }
        .flag {
            position: absolute;
            top: 10px;
            left: -8px;
            transform: rotate(-14deg);
            width: 24px;
            height: 24px;
            box-shadow: 0 0 0 3px $color-cream;
            border-radius: 100%;
            overflow: hidden;

            img {
                height: 100%;
                object-fit: contain;
            }
        }
    }

    // Address
    ul {
        margin-top: auto;
        padding-left: var(--gap);
        width: 100%;

        li {
            display: block;
            margin-bottom: clamp(2px, 0.25vw, 4px);
            color: $color-text;
            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 {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        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)});
                    }
                }
            }
        }
    }
}