Image positioning CSS issue

I have created a small mockup of the issue here: https://codepen.io/rctneil/pen/PoBgZEe?editors=1100

What I wish to achieve is effectively to remove the space above and below the logo inside the dotted red outline.

I want to keep the logo in exactly the same place as it is (horizontally centered and vertically centered on the photo's bottom edge), but remove the space above and below. This should reduce the overall height of the card.

I do not know the dimensions nor aspect ratio of the logos ahead of time.

Any ideas?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  box-sizing: border-box;
}

p {
  margin: 0;
}

html {
  height: 100%;
  display: grid;
  place-items: center;
}

.card {
  position: relative;
  width: 200px;
  border: 2px solid black;
}

.photo {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: -25%;
  padding: 25%;
  min-width: 100%;
  pointer-events: none;
  outline: 2px dotted red;
}

.logo img {
    position: absolute;
    display: block;
    max-width: 50%;
    max-height: 75%;
    margin-top: 0;
    padding: 0.2rem;
    border-radius: 0.25rem;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .25);
    background-color: #fff;
    pointer-events: all;
  }

.meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
}

<!-- language: lang-html -->

<div class="card">
  <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
  <div class="logo">
    <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
  </div>
  <div class="meta">
    <p>Name here</p>
    <p>Sub title here</p>
  </div>
</div>

<!-- end snippet -->

After spending more time on this than I would care to admit, the first comment on this answer pointed me in the direction of what I believe to be the only pure CSS way to solve your problem. Apparently, when calculating top padding and margin, percentage values are taken from the width of the element. Supposedly the only way to get the height is to use a transform.

The following code should provide what you need:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  box-sizing: border-box;
}

p {
  margin: 0;
}

html {
  height: 100%;
  display: grid;
  place-items: center;
}

.card {
  position: relative;
  width: 200px;
  border: 2px solid black;
}

.photo {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 100%;
    pointer-events: none;
    outline: 2px dotted red;
    /* This will slide the element up by 50% of it's total height */
    transform: translateY(-50%);
}
  
 .logo img {
    display: block;
    max-width: 50%;
    margin-top: 0;
    padding: 0.2rem;
    border-radius: 0.25rem;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,.25);
    background-color: #fff;
    pointer-events: all;
}

.meta {
   display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
}

<!-- language: lang-html -->

<div class="card">
  <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
  <div class="logo">
    <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
  </div>
  <div class="meta">
    <p>Name here</p>
    <p>Sub title here</p>
  </div>
</div>

<!-- end snippet -->

I took this approach where I set a aspect-ratio: 3/2; to the image in the red outline and object-fit: contain; to fill the logo inside container. Making sure it respects the width of 50%.

I included a second card in demo with an image that's taller in height to see effects of a different sized logo.

transform: translateY(-50%); is a neat trick as pointed out by @Clint Warner in answer below. Drawback is that it doesn't remove space from the DOM and I added a margin-top: -1.9rem; to the .meta class to remove space.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
    box-sizing: border-box;
}

p {
    margin: 0;
}

/* html {
    height: 100%;
    display: grid;
    place-items: center;
} */

body {
    display: grid;
    justify-content: center;
    grid-auto-flow: column;
    gap: 1rem;
}

.card {
    position: relative;
    width: 200px;
    border: 2px solid black;
}

.photo {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.logo {
    display: flex;
    justify-content: center;

    outline: 2px dotted red;
    transform: translateY(-50%);
}

.logo img {
    width: 50%;
    aspect-ratio: 3/2;
    object-fit: contain;

    padding: 0.2rem;
    border-radius: 0.25rem;
    background-color: #fff;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.25);
    pointer-events: all;
}

.meta {
    margin-top: -1.9rem;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
}

<!-- language: lang-html -->

<div class="card">
    <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />

    <div class="logo">
        <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
    </div>

    <div class="meta">
        <p>Name here</p>
        <p>Sub title here</p>
    </div>
</div>

<div class="card">
    <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />

    <div class="logo">
    
        <!-- Photo with more height than width -->
        <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/batman-the-ride-six-flags-magic-mountain-valencia.png" />
    </div>

    <div class="meta">
        <p>Name here</p>
        <p>Sub title here</p>
    </div>
</div>

<!-- end snippet -->