@layer components {
  /* Leather strip styling for footer */
  .leather-strip {
    position: relative;
    height: 22px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.10)),
      linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.65);
  }

  /* The stitched thread itself (two dashed lines) */
  .leather-strip::before,
  .leather-strip::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    height: 2px;
    opacity: .9;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(243,235,221,.75) 0px,
        rgba(243,235,221,.75) 10px,
        rgba(243,235,221,0) 10px,
        rgba(243,235,221,0) 18px
      );
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.55));
  }

  .leather-strip::before { top: 7px; }
  .leather-strip::after  { top: 13px; opacity: .65; }
}