@layer component.layout {
  .coupon {
    display: grid;
    grid-template: 
      '🎆' auto 
      '📄' 1fr / 
      1fr;
  }

  .coupon--flipped {
    grid-template: 
      '📄' 1fr 
      '🎆' auto / 
      1fr;
  }

  .coupon--has-scheme > .coupon__body {
    padding-inline: 2rem;
    padding-block: .1px;
  }

  .coupon__image img {
    width: 100%;
    display: block;
    object-fit: cover;
  }

  .coupon__image {
    grid-area: 🎆;
  }

  .coupon__overlay {
    padding: 1rem;
  }

  .coupon__body {
    grid-column: 📄;
    &::before {
      content: '';
      display: block;
      margin-bottom: 1em;
    }
    &::after {
      content: '';
      display: block;
      margin-top: 1em;
    }
  }
}