:root {
    --postcard-text-color: black;
    --postcard-stamp-border-color: brown;

    --postcard-visit-btn-color: indianred;

    --postcard-back-padding: 16px;

    --postcard-stamp-offset: 16px;
}

.postcard-container {
    display: block;

    width: 480px;
    height: 320px;

    background-color: transparent;

    perspective: 1000px;

    text-decoration: none;
    
    cursor: pointer;
}

.postcard,
.pseudo-postcard {
    width: 100%;
    height: 100%;

    color: var(--postcard-text-color);

    transition: transform 0.5s cubic-bezier(0.25, 0.25, 0.25, 1);
    transform-style: preserve-3d;
}

.postcard-container.is-flipped .postcard,
.postcard-container.is-flipped .pseudo-postcard {
    transform: rotateY(180deg);
}

.postcard-face {
    position: absolute;
    width: 100%;
    height: 100%;

    backface-visibility: hidden;

    box-sizing: border-box;

    overflow: hidden;

    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

.postcard-face > * {
    backface-visibility: hidden;
}

.postcard-front {
    display: flex;
    justify-content: center;
    align-items: center;

    backface-visibility: hidden;
}

.postcard-front img,
.postcard-front picture {
    display: block;
    width: 100%;
    height: 100%;

    object-position: center;
    object-fit: cover;

    image-rendering: auto;
}

.postcard-back {
    display: flex;

    transform: rotateY(180deg);

    padding: var(--postcard-back-padding);
}

.postcard-back picture {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -1;
}

.postcard-back img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.postcard-back-left,
.postcard-back-right {
    display: block;
    box-sizing: border-box;
}

.postcard-back-left {
    width: 60%;
    padding-right: calc(var(--postcard-back-padding) / 2); /* with the padding on the right half, it makes up whole back padding */
}

.postcard-back-right {
    width: 40%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;

    padding-left: calc(var(--postcard-back-padding) / 2); /* with the padding on the left half, it makes up whole back padding */
}

.postcard-stamp {
    width: 64px;
    height: 64px;

    transition: rotate 0.2s;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
}

.postcard-stamp img,
.postcard-stamp picture {
    width: 100%;
    height: 100%;
}


.postcard-stamp:hover {
    rotate: 6deg;

    background-color: transparent;
}

.postcard-visit-btn {
    width: 100%;

    display: block;

    background-color: transparent;
    color: var(--postcard-visit-btn-color);

    border: var(--postcard-visit-btn-color) dashed 2px;

    text-decoration: none;
    text-align: center;

    padding: 12px;
}

.postcard-visit-btn:hover {
    background-color: transparent;
    color: var(--postcard-visit-btn-color);

    border-style: solid;
}

/* Additional pseudo-postcard settings */

.pseudo-postcard .postcard-face {
    background-color: rgba(250, 235, 215, 0.1);
    background-image: none;

    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}

.pseudo-postcard h3,
.pseudo-postcard p {
    color: cornsilk;
    opacity: 0.4;
}

/* Element-specific adjustment for postcards */

.postcard h1, .pseudo-postcard h1,
.postcard h2, .pseudo-postcard h2,
.postcard h3, .pseudo-postcard h3,
.postcard h4, .pseudo-postcard h4,
.postcard h5, .pseudo-postcard h5,
.postcard h6, .pseudo-postcard h6 {
    background-color: transparent;
    background-image: none;

    filter: blur(0.5px);

    padding: 0;
}

.postcard p, .pseudo-postcard p {
    filter: blur(0.5px);

    padding: 0;
}