.gs-tag {
  position: relative;
  display: inline-block;
  font-family: var(--hand, 'Caveat', cursive);
  color: #3B2A18;
  filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, .4));
}
.gs-tag-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 190px;
  padding: 18px 26px 18px 42px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .55 -.15'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #D2AE7E, #BF9763);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}

.gs-tag-body::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 20, 12, .85) 0 3px, #EFE6D4 3.5px 5px, transparent 5.5px);
}
.gs-twine {
  position: absolute;
  left: -46px;
  top: 50%;
  width: 62px;
  height: 40px;
  margin-top: -34px;
  overflow: visible;
  fill: none;
  stroke: #E9DCC0;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 3 1.5;
}
.gs-tag-big { font-size: 30px; font-weight: 700; line-height: 1.1; }
.gs-tag-small {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(59, 42, 24, .75);
}

.gs-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.gs-empty .gs-tag { pointer-events: auto; transform: scale(calc(var(--s, 1) * 1.35)) rotate(-7deg); }