I want it to open full screen when you click on an image. How do I do this? I’ve tried all the options

html

 <div class="container">
 <div class="nft" onclick="addProd('11', products)" class="card" >
        <div class='main'>
          <img class='tokenImage' src="{{ url_for('static', filename='img/м1.jpg') }}" alt="NFT" />
          <h2>123</h2>
          <p class='description'>123</p>
          <div class='tokenInfo'>
            <div class="price">
              <ins>◘</ins>
              <p>499 Руб</p>
            </div>
          </div>
        </div>
     </div>
    </div>

CSS

.product-card-container {   display: flex;   gap: 0.5rem;   padding: 0.5rem;   border: 1px solid green;   justify-content: space-evenly; }  .product-card {   display: flex;   flex-direction: column;   justify-content: center;   width: 200px;   padding: 0 0.4rem;   row-gap: 0.5rem;   border: 1px solid black; }  .product-card > img {   object-fit: cover;   width: 100%;   height: 200px; }  .product-info {   /* Use this for growing an element to 100% width or height inside of a flex container */   flex-grow: 1 }  .nft{   user-select:none;   max-width: 300px;   margin: 2rem;   border: 1px solid #ffffff22;   background-color: #282c34;   background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%);   box-shadow: 0 7px 20px 5px #00000088;   border-radius: .7rem;   backdrop-filter: blur(7px);   -webkit-backdrop-filter: blur(7px);   overflow: hidden;   transition: .5s all;   .wrapper li{ display: inline-block; vertical-align: middle; margin: 10px 5px; }   hr{     width: 100%;     border: none;     border-bottom: 1px solid #88888855;     margin-top: 0;   }   ins{     text-decoration: none;   }   .main{     display: flex;     flex-direction: column;     width: 90%;     padding: 1rem;     color: #c572e6;     .tokenImage{       border-radius: .5rem;       max-width: 100%;       height: 250px;       object-fit: cover;     }     .description{         min-height: 100px;   max-height: 100px;       margin: .5rem 0;       color: #a89ec9;     }     .tokenInfo{       display: flex;       justify-content: space-between;       align-items: center;       .price{         display: flex;         align-items: center;         color: #ee83e5;         font-weight: 700;         ins{           margin-left: -.3rem;           margin-right: .5rem;         }       }       .duration{         display: flex;         align-items: center;         color: #a89ec9;         margin-right: .2rem;         ins{           margin: .5rem;           margin-bottom: .4rem;         }       }     }     .creator{       display: flex;       align-items: center;       margin-top: .2rem;       margin-bottom: -.3rem;       ins{         color: #a89ec9;         text-decoration: none;       }       .wrapper{         display: flex;         align-items: center;         border: 1px solid #ffffff22;         padding: .3rem;         margin: 0;         margin-right: .5rem;         border-radius: 100%;         box-shadow: inset 0 0 0 4px #000000aa;         img{           border-radius: 100%;           border: 1px solid #ffffff22;           width: 2rem;           height: 2rem;           object-fit: cover;           margin: 0;         }       }     }   }   ::before{     position: fixed;     content: "";     box-shadow: 0 0 100px 40px #ffffff08;     top: -10%;     left: -100%;     transform: rotate(-45deg);     height: 60rem;     transition: .7s all;   }   &:hover{     border: 1px solid #ffffff44;     box-shadow: 0 7px 50px 10px #000000aa;     transform: scale(1.015);     filter: brightness(1.3);     ::before{       filter: brightness(.5);       top: -100%;       left: 200%;     }   } }  .bg{   position: fixed;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   h1{     font-size: 20rem;     filter: opacity(0.5);   } }