"Extra" camp of my card template stopped working

[rafaeldepaula]

The extra camp shows in v2.1.60, but not in v2.1.61 and v2.1.62

Front:

<header>
	<div class="deck">{{Deck}}</div>
	<div class="subdeck">{{Subdeck}}</div>
	<div id="tag" class="tag">{{Tags}}</div>
</header>


<main class="box frente">
<div class="svg-wrapper">
  <img src="_book_study.svg"/>
</div>
	{{edit::Frente}}
</main>

<script>
	var $deck = document.querySelector('.deck');
	$deck.innerHTML = $deck.innerHTML.split(":")[0]
	var $tag = document.getElementById('tag');
	$tag.innerHTML = $tag.innerHTML.replaceAll("::", " / ").replaceAll("_", " ");
</script>

Back:

{{FrontSide}}

<span class="emoji" id="answer">🙇‍</span>

<div class="box verso">
    {{edit::Verso}}
</div>


{{#Extra}}
<div class="extra">💫 Extra <span class="click">( Clique aqui )</span></div>
<div class="backdrop"></div>
    <div class="wrapper-relative">
        <div class="close-btn">✖️</div>
        <div class="modal-content max-width-wrapper">
            {{Extra}}
        </div>
    </div>
{{/Extra}}


<script>
    var $extra = document.querySelector(".extra");
    var $backdrop = document.querySelector(".backdrop");
    var $modal = document.querySelector(".wrapper-relative");
    var $close = document.querySelector(".close-btn");
    
    function displayExtra () {
      $backdrop.classList.add('backdrop-open');
      $backdrop.classList.remove('backdrop-closed');
	 $modal.classList.add('modal-open');
	 $modal.classList.remove('modal-closed');
    }
    
    function removeExtra () {
      $backdrop.classList.remove('backdrop-open');
      $backdrop.classList.add('backdrop-closed');
	 $modal.classList.remove('modal-open');
	 $modal.classList.add('modal-closed');
    }
    
    $extra.addEventListener("click", displayExtra)
    $close.addEventListener("click",removeExtra)
    $backdrop.addEventListener("click", removeExtra)
</script>

Style:

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('_Poppins-Light.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('_Poppins-Regular.ttf') ;
}


@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('_Poppins-SemiBold.ttf');
}

*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
}

:root {
	--color-gray-100: hsl(225deg, 25%, 95%);
	--color-gray-200: hsl(225deg, 16%, 90%);
	--color-gray-300: hsl(225deg, 8%, 80%);
	--color-gray-400: hsl(225deg, 8%, 70%);
	--color-gray-500: hsl(225deg, 7%, 60%);
	--color-gray-600: hsl(225deg, 15%, 50%);
	--color-gray-700: hsl(225deg, 12%, 40%);
	--color-gray-900: hsl(225deg, 25%, 20%);
	--color-gray-1000: hsl(225deg, 15%, 15%);
}

:root {
	--color-strong: hsl(134, 71%, 41%);
	--window-bg: hsl(219, 28%, 88%);
	--card-bg: hsl(218, 27%, 94%);
	--text-fg: var(--color-gray-800);
	--text-fg-secondary: var(--color-gray-500);
	--border: var(--color-gray-300);
	--color-link: hsl(191, 100%, 40%);
}

:root[class*=night-mode],
.night_mode {
	--color-strong: hsl(135, 95%, 65%);
	--window-bg: hsl(253, 15%, 12%);
	--text-fg: var(--color-gray-100);
	--text-fg-secondary: var(--color-gray-500);
	--card-bg: hsl(255, 16%, 20%);
	--border: var(--color-gray-600);
	--color-link: hsl(191, 96%, 77%);
}

.svg-wrapper {
	position: absolute;
    top: 8px;	
    left: 8px;
	width: 30px;
}

html,
body {
	min-height: 100%;
}

header {
	margin-top: 48px;
}

body {
	font-family: 'Poppins', sans-serif;
	text-align: center;
	max-width: 65ch;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
}

a {
	color: #8be9fd;
}

strong,
b {
	color: var(--color-strong);
	font-weight: 600;
}

.card {
	font-size: 1.2rem;
	text-align: center;
	background: var(--window-bg);
}

.card.nightMode {
	font-size: 1.2rem;
	text-align: center;
	background: var(--window-bg);
}

.frente {
	position: relative;
}

.verso {
	position: relative;
	text-align: justify;
}

.box {
	background-color: var(--card-bg);
	padding: 20px;
	border-radius: 6px;
	border-top: 1px solid var(--border);
}

main {
	margin-top: 30px;
	margin-bottom: 15px;
}

.deck {
	font-family: sans-serif;
	font-size: 2rem;
	color: var(--text-fg);
	font-weight: 600;
}

.subdeck {
	color: var(--text-fg-secondary);
	font-weight: 400;
}

.tag {

}

.backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
}

.backdrop-open {
	display: block;
}

.backdrop-closed {
	display:none;
}

.wrapper-relative {
	position: fixed;
	top: 15%;
	padding-right: 10px;
	transform: translateY(-100vh);
}

.wrapper-relative::before {
	position: absolute;
	content: '💫 Extra';
	left: 0;
	transform: translateY(calc(-100% - 5px));
	color: white;
	font-size: 1rem;
}

.modal-content {
	background: var(--card-bg);
	color: var(--text-fg);
	text-align: justify;
	border: 1px solid var(--color-gray-700);
	overflow-y: auto;
	max-height: 75vh;
	border-radius: 3px;
}

.extra {
	font-family: monospace;
	margin-top: 20px;
	padding: 8px 16px;
	border: 1px solid var(--border);
	cursor: pointer;
	border-radius: 3px;
	color: var(--text-fg);
}

.close-btn {
	position: absolute;
	font-weight: 300;
	color: var(--color-gray-200);
	font-size: 30px;
	padding: 0px 10px;
	background: transparent;
	top: 0;
	right: 0;
	transform: translateY(-100%);
	cursor: pointer;
}

#close:hover {
	cursor: pointer;
}

.max-width-wrapper {
	max-width: 60ch;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
}

.click {
	font-size: 0.8rem;
	color: var(--text-fg-secondary);
}

.obsidian-link {
  display: block;
  font-size: 0.875rem;
  color: var(--color-gray-500);
	margin-top: 10px;
}

.obsidian-link:hover {
color: var(--color-link);
text-decoration: underline;
}

.obsidian-link::before {
content: '('
}

.obsidian-link::after {
content:')';
}

.modal-open {
    animation: openModal 0.4s ease-out forwards;
}

.modal-closed {
    animation: closeModal 0.4s ease-out forwards;
}


@keyframes openModal {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    50% {
        opacity: 1;
        transform: translateY(60%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes closeModal {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        opacity: 0.8;
        transform: translateY(60%);
    }
    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}