Initially, my `id="Gabel"` display was shown on my page with the correct format but when input display: none; my formatting was distorted. Is there anything wrong with my code? I want to show display id="Gabel" when I click the image on the main page. Here are some of the codes. My problem lies in the formatting of my card with an id of Gabel. Thank you

```css
#Gabel {
  background-color: #fff;
  position: relative;
  display: flex;
  border-radius: 20px;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
  padding: 0;
  top: 300px;
  /* display: none; */
  width: 80%;
}

.container_Gabel img {
  width: auto;
  height: 100%;
  border-radius: 5px 0 0 5px;
}

.container_Gabel .btn {
  position: absolute;
  bottom: -20px;
  right: -20px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  background-color: #fc9400;
  color: #fff;
  padding: 22px 45px;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}

.container__text {
  padding: 40px 40px 0;
}

.container__text h1 {
  color: #351897;
  font-weight: 400;
}

.container__text p {
  font-size: 0.9rem;
}

.container__text .container__text__timing {
  display: flex;
  margin: 20px 0 10px;
}

.container__text .container__text__timing .container__text__timing_time {
  margin-right: 40px;
}

.container__text .container__text__timing h2 {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 20px;
  margin-right: 30px;
}

.second_half {
  margin-left: 20px;
}

.container__text .container__text__timing p {
  color: #351897;
  font-weight: bold;
  font-size: 1.2rem;
}

.title-container {
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: tb-rl;
  margin-left: 5px;
  margin-right: 5px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.title-container span {
  transform: rotate(180deg);
  display: flex;
  text-align: center;
  min-height: 10em;
  vertical-align: middle;
  line-height: 2em;
  justify-content: center;
  width: 2em;
}

.vl {
  border-left: 4px solid black;
  height: 100px;
}

hr {
  border: 0;
  height: 1px;
  width: 100%;
  position: relative;
  margin-top: 0;
}
```

```html
<!DOCTYPE html>
<html>

<head>
    <script>
        function clearBox(elementID) {
            document.getElementById(elementID).innerHTML = "";
            var x = document.getElementById("Gabel");
            if (x.style.display === "none") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            }
        }
    </script>
</head>

<body>
    <div><button class="button button1">Main Menu</button></div>
    <div id="image">
        <div class="row" id="container-item">
            <div class="image-column col-lg-3 col-md-6">
                <div class="card h-100 p-1 card-container">
                    <div class="card-header">
                        <h3>GABEL LOFFEL</h3>
                    </div>
                    <div class="card-img-wrapper ">
                        <button class="button2" onclick="clearBox('container-item')">
                        <img src="assets\image_1.jpg" alt="">
                        </button>
                        <div class="content">
                            <hr>
                            <div class="para d-flex justify-content-center align-items-center">
                                <p>Get out your <br> Lederhosen!</p>
                            </div>

                            <hr>
                            <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="container_Gabel" id="Gabel">
        <div class="title-container"><span>
                <h2>GABEL LOFFEL</h2>
            </span></div>
        <div>
            <img src="assets\swiss.jpg" alt="Pancake" />
        </div>
        <div class="container__text">
            <h1>Gabel Loffell</h1>
            <div class="container__text__timing">
                <div class="container__text__timing_time">
                    <h2>
                        235 GLENDALE AVE.<br>
                        MERIDIAN CITY<br>
                        T: 490 49 4000<br>
                        W: GANDG.RES
                    </h2>
                </div>
                <div class="container__text__timing_time vl"></div>
                <div class="container__text__timing_time">
                    <h2 class="second_half">
                        CATEGORY: SWISS<br>
                        OPEN: 10AM TO 10PM<br>
                        PRICE: $$$
                    </h2>
                </div>
            </div>
            <hr>
            <div class="body_container">
                <div class="body_card">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
                        accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
                        dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
                        a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
                        non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
                        fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
                        velit ac, elementum scelerisque tortor. Cras eget maximus diam.

                        <br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
                        ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
                        id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
                        posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
                        turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
                        tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
                        eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
                        sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
                        imperdiet congue ut id metus. Sed sit amet condimentum eros.
                    </p>

                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>
```