.brand-mark,
.art-card-front .paw,
.aside-icon,
.section-paw,
.paw-log {
  display: grid;
  place-items: center;
}

.brand-mark::before,
.art-card-front .paw::before,
.aside-icon::before,
.section-paw::before,
.paw-log::before {
  content: "";
  display: block;
  width: var(--paw-size, 22px);
  aspect-ratio: 28 / 25;
  background: currentColor;
  -webkit-mask: url("/paw-icon.svg") center / contain no-repeat;
  mask: url("/paw-icon.svg") center / contain no-repeat;
}

.brand-mark { --paw-size: 20px; }
.art-card-front .paw { --paw-size: 28px; color: var(--ink); }
.aside-icon { --paw-size: 26px; color: var(--ink); }
.section-paw { --paw-size: 18px; width: 30px; height: 30px; padding: 0; flex: 0 0 auto; }
.paw-log { --paw-size: 16px; }

.dog-hero::after {
  content: "";
  width: 240px;
  height: 215px;
  right: 25px;
  top: -55px;
  background: #3d614d;
  -webkit-mask: url("/paw-icon.svg") center / contain no-repeat;
  mask: url("/paw-icon.svg") center / contain no-repeat;
}

@media (max-width: 640px) {
  .dog-hero::after { right: -70px; top: -45px; }
}