Html – How only make one block grow and allow it to be "unchecked" when clicked again

Still ahrd for me to guess what youa ctually trying to achieve. But according to your code maybe soemthing like this.
This is a cleaner version with a valid markup. To know if a markup is valid you can always use the W3C Markup Validator.

There are a few things to go through as such the answer will be long.

1. I changed your cards to sections to make the markup semantically more valid.
2. I changed the paragraph (<p>) to a sub-headline (h2) as the name of a chapter is not a pargraph (block fo flow text) but a headline.
3. For the text you want to hide and show I used a "wrapper" which is an unspecific container to help with the focused state.
4. Since you want to click on an element to expand it with more content you need to add a few things to assist users with disabilities that use a screen readers and/or navgiating with a keyboard only. For that I added the attribtues aria-expanded="false" which indicates a collapsed state, tabindex="0" to make it focusable by using the tab key, and `role="button" to inform assistive technology that you can click on that element.
5. I re-used your CSS and changed the names and such to fit the new markup. Since I not usign CSS-hacks I changed the :focus pseudo-selector to [aria-expanded="true"] to select the cards that are currently expanded.
6. I deleted all your inline-style and moved them to to CSS.
7. To show the clicked on element in full screen and also showing the details I select the wrapper and moving it out of flow by using position: fixed; inset: 0; which will the element consuem the entire screen with the intended padding/margin. To allow lonegr etxt that would not fit the screen I added an overflwo rule: overflow-y: auto.

Now to the JavaScript part. I will not explain everythin ind etail or go 100% technical correct to consfuse you less. You can look it up once you got more familiar with CSS and HTML and actually starting with JS. AS of now I think that you still far away from that. PS: never believe anybody that tells you that you learned everything about HTML and CSS that you can learn about. especially if you go indepth on modern topics such as responsive web design, accesibility, user experience, SEO ratings, performance, and such you will realize how little you know (counts for most develoeprs that are not long time seniors).

window.addEventListener('DOMContentLoaded', function() {
  ...
})

Here you have an addEventListener that waits for a specific event to execute an anomynous function (a function without a name that only runs within this event listener and therefor can not be reference outside of it). DOMContentLoaded is the event we are waiting for. We wait until the browser loaded the entire DOM tree. You need to do that as the HTML document is read from top to bottom. Within that function we refrence elements that the browser would not know at the time that the script runs which would cause a ReferenceError: Element is null error. Waiting until the browser knwo all elements will prevent this error.

const Wrappers = document.querySelectorAll('.wrapper');

This declares a constant with the Name Wrapper. documentQuerySelectorAll will return a Node List which basically is just a list of all elements that you referenced with the "CSS selector". In thsi case it will return a list with 6 elements.

Wrappers.forEach(temporaryVariable => {
  temporaryVariable.addEventListener('click', function() {
    ...
  })
});

forEach is one of the loopign emthods. As we have a List we need to loop through the list to select every single element in that list and assign them for this loop through a temporary variable so we can "do stuff" with every element. In this case we use an eventListener on every element to wait for a click event (somebody clicks on that element) to execute another anomynous function.

let selectedElement = this.closest('.wrapper');
let expandedState = selectedElement.ariaExpanded == 'true';
selectedElement.ariaExpanded = !expandedState;

With let I declare a variable.
this.closest('element') I select the cloest element that fits the "css rule". I do that so that I always get the "wrapper" even if I click on another element within the wrapper and not the wrapper itself.
element.ariaExpanded == 'true' is a little bit tricky as JS is not as logic soemtimes as you think. While the aria-expanded attribute contains a boolean (true/false), JS will not return a boolean but a string! Therefor I cannot just check for true/false but need to check for a string. and then get a boolean of true/false from it as my condition is either true or false.
With element.ariaExpanded = !boolean will toggle the boolean. The attention mark negates the boolean:

!true = false
!false = true

window.addEventListener('DOMContentLoaded', function() {
  const Wrappers = document.querySelectorAll('.wrapper');
  Wrappers.forEach(wrapper => {
    wrapper.addEventListener('click', function() {
      let selectedElement = this.closest('.wrapper');
      let expandedState = selectedElement.ariaExpanded == 'true';
      selectedElement.ariaExpanded = !expandedState;  
    })
  })
})

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* background-color:  rgba(0, 0, 47,0.3); */
  justify-content: space-evenly;
}

.wrapper[aria-expanded="true"] {
  background-color: white;
  position: fixed;
  inset: 0;
  padding: 50px;
  overflow-y: auto;
  z-index: 100;
}

.wrapper[aria-expanded="true"] section {
  width: auto;
  height: auto;
}

.wrapper[aria-expanded="true"] p {
  display: block;
}

section {
  margin: 30px;
  padding: 20px;
  height: 275px;
  width: 325px;
  border: 1px solid gray;
  background: rgba(255, 75, 255, 0.1);
  box-shadow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
  backdrop-filter: blur( 4px);
  -webkit-backdrop-filter: blur( 4px);
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18);
}

.wrapper[aria-expanded="false"] section:hover {
  transform: scale(1.05);
}

section img {
  display: block;
  margin: 0 auto;
  width: 140px;
  aspect-ratio: 1;
}

section h1,
section h2,
section p {
  color: white;
}

section h1,
section h2 {
  text-align: center;
}

section h2 {
  font-size: 20px;
}

section p {
  display: none;
}

<div class="wrapper" aria-expanded="false" tabindex="0" role="button">
  <section>
    <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg">
    <h1>Chapter 1: </h1>
    <h2>Step-by-Step</h2>
    <p>Lorem Ipsum</p>
  </section>
</div>

<div class="wrapper" aria-expanded="false" tabindex="0" role="button">
  <section>
    <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg">
    <h1>Chapter 2: </h1>
    <h2>Races</h2>
    <p>Lorem Ipsum</p>
  </section>
</div>

<div class="wrapper" aria-expanded="false" tabindex="0" role="button">
  <section>
    <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg">
    <h1>Chapter 3: </h1>
    <h2>Classes</h2>
    <p>Lorem Ipsum</p>
  </section>
</div>

<div class="wrapper" aria-expanded="false" tabindex="0" role="button">
  <section>
    <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg">
    <h1>Chapter 4: </h1>
    <h2>Personality and Background</h2>
    <p>Lorem Ipsum</p>
  </section>
</div>

<div class="wrapper" aria-expanded="false" tabindex="0" role="button">
  <section>
    <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg">
    <h1>Chapter 3: </h1>
    <h2>Equipment</h2>
    <p>Lorem Ipsum</p>
  </section>
</div>

<div class="wrapper" aria-expanded="false" tabindex="0" role="button">
  <section>
    <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg">
    <h1>Chapter 2: </h1>
    <h2>Races</h2>
    <p>Customization options</p>
  </section>
</div>

If you would use SASS, an "advanced CSS" (Preprocessor) youc an also nest your CSS code and make it shorter:

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* background-color:  rgba(0, 0, 47,0.3); */
  justify-content: space-evenly;
}

.wrapper {
  &[aria-expanded="true"] {
    background-color: white;
    position: fixed;
    inset: 0;
    padding: 50px;
    overflow-y: auto;
    z-index: 100;

    section {
      width: auto;
      height: auto;
    }
    p {
      display: block;
    }
  }
  &[aria-expanded="false"] {
    section {
      &:hover {
        transform: scale(1.05);
      }
    }
  }
}

section {
  margin: 30px;
  padding: 20px;
  height: 275px;
  width: 325px;
  border: 1px solid gray;
  background: rgba(255, 75, 255, 0.1);
  box-shadow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
  backdrop-filter: blur( 4px);
  -webkit-backdrop-filter: blur( 4px);
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18);

  img {
    display: block;
    margin: 0 auto;
    width: 140px;
    aspect-ratio: 1;
  }
  h1,
  h2,
  p {
    color: white;
  }
  h1,
  h2 {
    text-align: center;
  }
  h2 {
    font-size: 20px;
  }
  p {
    display: none;
  }
}