@layer component.base {
  .postcard {
    display: grid;
    grid-template:
      "📄 🎆" auto /
      1fr 1fr;
    gap: var(--postcard-padding);
  }

  .postcard__main {
    padding-inline: var(--postcard-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-area: 📄;
  }

  .postcard__image {
    grid-area: 🎆;
    img {
      vertical-align: bottom;
      width: 100%;
    }
  }
}

@layer component.layout {
  .postcard {
    --postcard-padding: 1.333rem;
    @media (max-width: 699px) {
      --postcard-padding: 1rem;
      grid-template:
        "🎆" auto
        "📄" auto /
        auto;
      gap: 0;
    }
  }
  .postcard__stamp,
  .postcard__content {
    &::before {
      content: "";
      display: block;
      margin-bottom: var(--postcard-padding);
    }
    &::after {
      content: "";
      display: block;
      margin-top: var(--postcard-padding);
    }
  }
}