<div class="system-container">
   <div class="system-title">
      <h2>System name</h2>
      <hr>
      <p>hey system description here or whatever</p>
         <div>
            <a href="your link">link</a> ． <a href="your link">link</a> ． <a href="your link">link</a>
         </div>
    </div>
   <hr>
   <div class="alter-pill">
       <div class="alter-block"> 
          <img id="alter-icon" src="https://file.garden/ZuQf8MRKYTjyuCx8/umar.jpg">
          <p><h2>umar</h2>prns/prns</p>
       </div>
       <div class="alter-block"> 
          <div id="desc-scroll">
              <p>something something description text whatever blah bleh bleh blo yes yes placeholder whatever</p>
          </div>
          <div style="text-align: center;">
            <a href="your link">link</a> ． <a href="your link">link</a> ． <a href="your link">link</a>
         </div>
       </div>
   </div>
   <div class="alter-pill">
       <div class="alter-block"> 
          <img id="alter-icon" src="https://file.garden/ZuQf8MRKYTjyuCx8/umar.jpg">
          <p><h2>umar 2</h2>prns/prns</p>
       </div>
       <div class="alter-block"> 
          <div id="desc-scroll">
              <p>mytosis</p>
          </div>
          <div style="text-align: center;">
            <a href="your link">link</a> ． <a href="your link">link</a> ． <a href="your link">link</a>
         </div>
       </div>
   </div>
   <hr>
   <div><p>whatever uou want here i guess</p></div>
</div>

<style>
hr {
width: 15em;
margin-bottom: 10px;
}

.system-title {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
width: 15em;
}

.system-title p {
text-align: center;
line-height: 1em;
padding: 10px 0px;
}

.alter-pill h2 {
padding-bottom: 0px;
}

/* Use this as the main container pls thanx */
.system-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#desc-scroll {
width: 8em;
height: 7em;
border: var(--color-border) 1px solid;
border-radius: 3px;
padding: 5px;
overflow-y: scroll;
}

#desc-scroll::-webkit-scrollbar {
width: 0px;
}

.alter-block {
display: block;
}

.alter-pill {
display: flex;
justify-content: space-between;
border: var(--color-border) 1px solid;
margin-bottom: 10px;
border-radius: 5px;
width: 15em;
height: 10em;
padding: 10px;
}

#alter-icon {
width: 5em;
height: 5em;
}

.system-title hr {
width: 5em;
margin: 0px;
}

.container-1 {
border: none;
display: flex;
align-items: center;
justify-content: center;
}
</style>