How to get card to resize when screen size is changed

I have a webpage with a navigation bar and a card with information on it. The navigation bar resizes with the screen but I'm struggling to get the card to do the same . I've tried changing the px to rem in the CSS but that doesn't seem to work. I've also tried making a wrapper that goes around the elements within the body of the HTML but that hasn't solved the problem either.

If anyone can help me with this I'd be really appreciative.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="content-wrapper">
    <div class="loader"></div>
    <header>
        <a href="#" class="logo">[Ayanfe]:)</a>
        <ul>
            <li><a href="./Pages/1/index.html" class="active">Next</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </header>

    <main>

  <a href="#" class="card">
      <div class="inner">
        <time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
            <br>
            <br>

        <time class="Key">Keyword: Escapism<time>


      </div>

 
  </a>
</div>
    
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body {
   background-color: black;
   padding: 0;
   margin: 0;
   height: 100vh;
   width: 100vh;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.875rem 6.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Poppins, sans-serif;
    z-index: 10000;
}

header .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.563rem;
    text-transform: uppercase;
    letter-spacing: 0.313rem;

}

header ul{
    display: flex;
    justify-content: center;
    align-items: center;

}

header ul li {
    list-style: none;
    margin-left: 1.25rem;
}

header ul li a {
     text-decoration: none;
     padding: 0.375rem 0.938rem;
     color: #fff;
     border-radius: 1.25rem;

}

header ul li a:hover,
header ul li a.active {
    background: #fff;
    color: #2b1055;
}

main,
footer {
  max-width: 60rem;
  margin: 0 auto;
}

.card {
  height: 28.125rem;
  position: relative;
  left: 18.75rem;
  top: 12.5rem;
  padding: 1.25rem;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  border: 0.25rem solid;
  border-color: black;
  margin-bottom: 1.25rem;
  background: url(./Images/1.jpg);
  background-repeat: no-repeat;
  background-size: 105%;
  margin: auto;

}

@include media {
    height: 500px;

}

.inner {
  height: 100%;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  background: white;
  box-sizing: border-box;
  padding: 40px;
  border: solid;
  border-color: grey;
  border-radius: 2px;
}
  
  @include media {
    width: 50%;
    height: 100%;
  }


.title {
  font-size: 24px;
  color: black;  
  text-align: center;
  font-weight: 700;
  color: #181818;
  text-shadow: 0px 2px 2px #a6f8d5;
  position: relative;
  margin: 0 0 20px 0;
}
  
  @include media {
    font-size: 30px;
  }


.subtitle {
  color: black;
  font-size: 20px;
  text-align: center;
}


.content-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 60rem;
}

Solution

The solution to your problem is to remove the body {...} option and then responsiveness will work for <a class="card">. Plus I added some @media(max-width: ... px) settings.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
   background-color: black;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.875rem 6.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Poppins, sans-serif;
    z-index: 10000;
}

header .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.563rem;
    text-transform: uppercase;
    letter-spacing: 0.313rem;

}

header ul{
    display: flex;
    justify-content: center;
    align-items: center;

}

header ul li {
    list-style: none;
    margin-left: 1.25rem;
}

header ul li a {
     text-decoration: none;
     padding: 0.375rem 0.938rem;
     color: #fff;
     border-radius: 1.25rem;

}

header ul li a:hover,
header ul li a.active {
    background: #fff;
    color: #2b1055;
}

main,
footer {
  max-width: 60rem;
  margin: 0 auto;
}

.card {
  height: 28.125rem;
  width: 70%;
  position: relative;
  left: 18.75rem;
  top: 12.5rem;
  padding: 1.25rem;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  border: 0.25rem solid;
  border-color: black;
  background: url(./Images/1.jpg);
  background-repeat: no-repeat;
  background-size: 105%;
  margin: 0 !important;
}

/*
@include media {
    height: 500px;

}*/

.inner {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  background: white;
  box-sizing: border-box;
  padding: 40px;
  border: solid;
  border-color: grey;
  border-radius: 2px;
}
  
 /* @include media {
    width: 50%;
    height: 100%;
  }*/


.title {
  font-size: 24px;
  color: black;  
  text-align: center;
  font-weight: 700;
  color: #181818;
  text-shadow: 0px 2px 2px #a6f8d5;
  position: relative;
  margin: 0 0 20px 0;
}
  
  /*@include media {
    font-size: 30px;
  }*/


.subtitle {
  color: black;
  font-size: 20px;
  text-align: center;
}

.Key{
    margin-top: 50px;
}

.content-wrapper {
  height: 100vh;
}

@media(max-width: 1000px) {
    .Key, .subtitle {
        font-size: 1rem;
    }
}
@media(max-width: 750px) {
    .Key, .subtitle {
        font-size: 0.8rem;
    }

    .inner {
        height: 70%;
    }
}
@media(max-width: 720px) {
    .Key, .subtitle {
        font-size: 0.6rem;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content-wrapper">
        <header>
            <a href="#" class="logo">[Ayanfe]:)</a>
            <ul>
                <li><a href="./Pages/1/index.html" class="active">Next</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>

        <a href="#" class="card">
            <div class="inner">
                    <time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
                    <br>
                    <br>

                <time class="Key">Keyword: Escapism<time>
            </div>
        </a>
    </div>
    
</body>
</html>