What does this code do?
document.querySelector(‘#gallery’).insertAdjacentHTML(‘beforeend’, <br/> &lt;div class="modal-container" aria-modal="true" role="dialog" hidden="true"&gt;<br/> &lt;div class="modal"&gt;<br/> &lt;div class="modal__overlay"&gt;<br/> &lt;div class="modal__btn-container"&gt;<br/> &lt;button class="modal__btn modal__arrow modal__arrow--left" id="left" aria-label="Previous image"&gt;<br/> &lt;svg width="24" height="24" fill="none" viewBox="0 0 24 24"&gt;<br/> &lt;path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 6.75L4.75 12L10.25 17.25"&gt;&lt;/path&gt;<br/> &lt;path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12H5"&gt;&lt;/path&gt;<br/> &lt;/svg&gt;<br/> &lt;/button&gt;<br/> &lt;button class="modal__btn modal__close" aria-label="Close gallery"&gt;<br/> &lt;svg width="24" height="24" fill="none" viewBox="0 0 24 24"&gt;<br/> &lt;path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L6.75 17.25"&gt;&lt;/path&gt;<br/> &lt;path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75L17.25 17.25"&gt;&lt;/path&gt;<br/> &lt;/svg&gt;<br/> &lt;/button&gt;<br/> &lt;button class="modal__btn modal__arrow modal__arrow--right" id="right" aria-label="Next image"&gt;<br/> &lt;svg width="24" height="24" fill="none" viewBox="0 0 24 24"&gt;<br/> &lt;path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"&gt;&lt;/path&gt;<br/> &lt;path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"&gt;&lt;/path&gt;<br/> &lt;/svg&gt;<br/> &lt;/button&gt;<br/> &lt;/div&gt;<br/> &lt;div class="modal__indicator-container"&gt;<br/> <br/> &lt;/div&gt;<br/> &lt;/div&gt;<br/> <br/> &lt;div class="modal__image-container"&gt;<br/> <br/> &lt;/div&gt;<br/> &lt;/div&gt;<br/> &lt;/div&gt;<br/> &lt;style&gt;<br/> .modal-container {<br/> position: fixed;<br/> inset: 0;<br/> background-color: hsl(var(--dark) / .8);<br/> display: grid;<br/> place-items: center;<br/> opacity: 0;<br/> pointer-events: none;<br/> transition: opacity 250ms ease-in-out;<br/> }<br/> <br/> .modal-container.active {<br/> opacity: 1;<br/> pointer-events: all;<br/> }<br/> <br/> .modal {<br/> position: relative;<br/> margin: 2rem;<br/> max-width: 900px;<br/> width: 100%;<br/> display: grid;<br/> place-items: center;<br/> overflow: hidden;<br/> box-shadow: 0px 2px 40px hsl(var(--dark));<br/> }<br/> <br/> .modal__image-container {<br/> display: flex;<br/> max-height: 100vh;<br/> }<br/> <br/> .modal__image {<br/> width: 100%;<br/> height: 100%;<br/> aspect-ratio: 16/10;<br/> object-fit: cover;<br/> }<br/> <br/> .modal__overlay {<br/> position: absolute;<br/> z-index: 4;<br/> bottom: 1rem;<br/> display: grid;<br/> gap: 1rem;<br/> }<br/> <br/> .modal__btn-container {<br/> display: flex;<br/> gap: 1rem;<br/> }<br/> <br/> .modal__btn {<br/> display: grid;<br/> place-items: center;<br/> background-color: hsl(var(--bkg) / .5);<br/> color: hsl(var(--text));<br/> padding: .5rem;<br/> border: 4px solid transparent;<br/> border-radius: 50%;<br/> cursor: pointer;<br/> transition: background-color 250ms cubic-bezier(0.9, 0, 0, 0.96), border 250ms cubic-bezier(0.9, 0, 0, 0.96);<br/> }<br/> <br/> .modal__btn:is(:hover,:focus) {<br/> background-color: hsl(var(--bkg) / .7);<br/> border: 4px solid hsl(var(--bkg) / .8);<br/> }<br/> <br/> .modal__btn svg {<br/> pointer-events: none;<br/> width: 2rem;<br/> height: 2rem;<br/> transition: transform 250ms cubic-bezier(0.9, 0, 0, 0.96);<br/> }<br/> .modal__btn:is(:hover,:focus) svg {<br/> transform: scale(1.2);<br/> }<br/> <br/> .modal__indicator-container {<br/> order: -1;<br/> display: flex;<br/> justify-content: center;<br/> gap: 1rem;<br/> }<br/> <br/> .modal__indicator {<br/> width: 1rem;<br/> height: 1rem;<br/> border-radius: 50%;<br/> background-color: hsl(var(--bkg) / .4);<br/> border: 3px solid hsl(var(--bkg) / .6);<br/> cursor: pointer;<br/> position: relative;<br/> }<br/> <br/> .modal__indicator:is(:hover, :focus) {<br/> background-color: hsl(var(--bkg) / .5);<br/> border: 3px solid hsl(var(--bkg) / .7);<br/> }<br/> <br/> .modal__indicator.active::before {<br/> content: '';<br/> position: absolute;<br/> inset: 2px;<br/> border-radius: 50%;<br/> background-color: hsl(var(--bkg) / .9);<br/> }<br/> &lt;/style&gt;<br/> )