Bubble text with image background

<h1>MIAMI</h1>

:root {
  --stroke-color: hsl(311, 75%, 74%);
  --background-color: hsl(184, 93%, 62%);
}

@font-face {
  font-family: Gluten;
  src: url("fonts/Gluten-VariableFont.ttf");
  font-display: block;
}

body {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;

  background-color: var(--background-color);

  margin: 0;
}

h1 {
  width: min-content;
  margin: 0;

  font-size: clamp(5rem, 23vw + -0.1rem, 15rem);
  letter-spacing: 0.75rem;
  font-family: Gluten, Grandstander, cursive;

  color: transparent;
  -webkit-text-stroke: var(--stroke-color) 0.2rem;

  -webkit-background-clip: text;
  background-clip: text;
  background-image: url("img/miami.jpg");
  background-position: center;
  background-size: cover;

  filter: brightness(1.1) drop-shadow(-2px -2px 0.2rem var(--stroke-color))
    drop-shadow(2px 8px 0.2rem var(--stroke-color));
}