I'm designing a card using [this media card code pen](https://codepen.io/Kelbin/pen/QWNzrjW) as reference. Here's what I want to do:

* I want to make the image fit the top half of my card and have the text below.
* I'm trying to add a card link that takes the user to another page, either by clicking on the title or anywhere on the card.

There's also an issue with the card layout:

* when I reduce the screen size, the right border gets covered like [this](https://i.stack.imgur.com/AB47b.png)

Edits: Fixed the issue with the above card layout. Added the heading before the card (it stretches outside the image container when the screen width is very small, not sure if that's a big issue) and improved some formatting (added media query, modified margin, height).

```css
/* Style the content-main heading */
.content-main {
  font-size: 14px;
  font-weight: bold;
  font-family: 'Raleway', sans-serif;
}

.card {
  display: flex;
  flex-direction: column;
  margin: 10px auto 20px;
  overflow: hidden;
  border-radius: 5px;
  /* for the rounded corners */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  max-width: 700px;
  max-height: 1050px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

.card-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.card-image img {
  width: 100%;
}

.card-title {
  text-decoration: none;
  color: #2E4053;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-text {
  margin-bottom: 0.5rem;
}

/* Media query */
/* for navigation menu */
@media all and (max-width: 600px) { 
  ...
}
/* for cards */
@media query only screen and (max-width: 400px){
  .card-image {
    height: 300px;
  }
}
```

```html
<!-- content-main heading -->
<div class="content-main">
  <h1>Navigation content</h1>
</div>

<!--Card contents-->
<div class="card">
  <div class="card-image">
    <img src="/images/reviews-img-1.jpg" alt="..." />
  </div>
  <a href="#" class="card-title">Reviews</a>
  <p class="card-text">
    This is the place for reviews on cameras and film.
  </p>
</div>

<div class="card">
  <div class="card-image">
    <img src="/images/resources-img-2.jpg" alt="...">
  </div>
  <a href="#" class="card-title">Resources</a>
  <p class="card-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus condimentum viverra.
  </p>
</div>

<div class="card">
  <div class="card-image">
    <img src="/images/wheretogetfilmdeveloped-img-3.jpg" alt="...">
  </div>
  <a href="#" class="card-title">Where to Get Film Developed</a>
  <p class="card-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus condimentum viverra.
  </p>
</div>
```

How do I create my card to make it similar to the code pen reference?