Sticker name tag

<div class="name-tag">Rupert</div>

@font-face {
  font-family: "Barlow";
  font-weight: 600;
  src: url("fonts/Barlow-SemiBold.ttf");
}

@font-face {
  font-family: "Coming Soon";
  src: url("fonts/ComingSoon-Regular.ttf");
}

:root {
  --border-radius: 0.5rem;
  --border-width: 0.5rem;

  --bg-color: hsl(353, 98%, 43%);
  --label-color: white;
  --header-text-color: hsl(0, 0%, 97%);
  --body-text-color: hsl(0, 0%, 10%);
}

body {
  min-height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  background: hsl(214, 40%, 70%);
}

.name-tag {
  width: 90%;
  max-width: 600px;
  aspect-ratio: 1;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;

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

  border: var(--border-width) solid var(--label-color);
  border-radius: var(--border-radius);

  background-image: linear-gradient(
      to top,
      var(--bg-color) var(--border-width),
      transparent var(--border-width) 100%
    ),
    linear-gradient(
      to right,
      var(--bg-color) var(--border-width),
      var(--label-color) var(--border-width) calc(100% - var(--border-width)),
      var(--bg-color) calc(100% - var(--border-width))
    );

  background-size: 100%, 100% 80%;
  background-position: 100%, 0% 100%;
  background-repeat: no-repeat;

  font-family: "Coming Soon", cursive;
  font-size: clamp(2.25rem, 0rem + 12vw, 4.5rem);

  color: var(--body-text-color);

  text-align: center;
}

.name-tag::before,
.name-tag::after {
  display: block;

  font-family: "Barlow", sans-serif;
  font-weight: 600;

  color: var(--header-text-color);
  line-height: 1;
}

.name-tag::before {
  content: "HELLO";

  padding-block-start: 1rem;

  font-size: 4rem;
  font-weight: 600;

  letter-spacing: 0.3rem;
  text-align: center;

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

  border-start-end-radius: var(--border-radius);
  border-start-start-radius: var(--border-radius);
}

.name-tag::after {
  content: "my name is";

  grid-row: 2;

  padding-block-end: 1rem;
  margin-block-end: clamp(2.25rem, -5.5rem + 41.3333vw, 10rem);

  font-size: 1.5rem;
  letter-spacing: 0.1rem;

  text-align: center;

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