Is it possible to prevent md-buttons from spanning the entire grid width?

[Andre601]

I'm in the process of updating a page I use with some new info.

I use grids to have some sections in the page.
Now I want to add md-button links to have a quick navigation for the viewer.

The issue I encounter right now is, that the button is streched across the entire width of the Grid, rather than just the text width + padding like it does by default:

The grid itself has a structure like this:

<div class="mdx-grid-container">
  <div class="mdx-grid-wrapper">
    <div class="mdx-grid-child__header">
      <h3 id="commands">Commands<a href="#commands" class="headerlink" title="Permanent Link">¶</a></h3>
      <p>The bot offers various commands in different categories, all with the purpose to bring you fun, entertainment or information.</p>
      <a href="/wiki/commands" class="md-button">Learn More</a> <!-- <-- Here is the button -->
    </div>
    <div class="mdx-grid-child">
      <h3 id="fun">Fun<a class="headerlink" href="#fun" title="Permanent Link">¶</a></h3>
      <p>*Purr brings countless fun commands for your enjoyment. These commands include interactions with other users but also commands to get images of cute animals and similar.</p>
      <img src="/assets/img/demo/fun.webp">
    </div>
  </div>
</div>

The CSS I have for the frontpage:

.mdx-container {
    display: block;
    padding-left: 2rem;
    padding-right: 2rem;
    
    background: linear-gradient(var(--md-primary-fg-color), var(--md-primary-fg-color) 100px, var(--md-default-bg-color) 100px);
    
}

.mdx-container .mdx-hero {
    text-align: center;
}

.mdx-container .mdx-hero .mdx-description {
    max-width: 35rem;
    font-size: 1.6rem;
    line-height: 1.3;
}

.mdx-container .mdx-hero .mdx-description,
.mdx-container .mdx-hero .mdx-button {
    margin: 1.8rem auto;
}

/* Grid stuff */
.mdx-grid-container {
    background-color: hsla(var(--md-hue),0%,100%,0.025);
    padding: 1rem;
}

.mdx-grid-container h2,
.mdx-grid-container h3 {
    text-align: center;
    margin-top: 0;
}

.mdx-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mdx-grid-child__header {
    grid-column: span 2;
}

@media only screen and (max-width: 600px) {
    .mdx-grid-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .mdx-grid-child__header {
        grid-column: span 1;
    }
}

.mdx-grid-child {
    background-color: var(--md-default-bg-color);
    padding: 0.5rem;
}

.mdx-grid-child > a.md-button{
    display: grid;
    align-items: center;
    justify-items: auto;
}

.mdx-grid-child__header > a.md-button{
    display: grid;
    align-items: center;
    justify-items: center;
}