* {
    padding: 0;
    margin: 0;
}

body {
  background-color: hsl(47, 88%, 63%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  font-family: "Play", sans-serif;

}

.blog-card-container {
  background-color: hsl(0, 0%, 100%);
  display: flex;
  width: 350px;
  height: fit-content;
  flex-direction: column;
  justify-content: center;
  padding: 1.25%;
  border-radius: 25px;
  border: 1px solid black;
  box-shadow: 10px 10px 5px black;
}

.card-img {
  border-radius: 10px;
  width: 100%;
}

.tag-name {
  padding: 2%;
  background-color: hsl(47, 88%, 63%);
  font-weight: 800;
  width: fit-content;
  border-radius: 10%;
  margin: 5% 0;
}

.public-date {
    font-weight: 500;
    font-size: 16px;
    color: hsl(0, 0%, 7%);
    margin-top: 0;
    margin-bottom: 5%;
}

.title {
    font-weight: 800;
    margin-bottom: 5%;
}

.description {
    font-weight: 500;
    font-size: 16px;
    color: hsl(0, 0%, 7%);
    margin-bottom: 5%;
}

.director-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.director-img {
    width: 10%;
}

.director {
    font-weight: 800;
}


@media (max-width: 377px) {
  * {
    padding: 0;
    margin: 0;
}

body {
  background-color: hsl(47, 88%, 63%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  font-family: "Play", sans-serif;

}

.blog-card-container {
  background-color: hsl(0, 0%, 100%);
  display: flex;
  width: 70%;
  height: fit-content;
  flex-direction: column;
  justify-content: center;
  padding: 4.5%;
  border-radius: 25px;
  border: 1px solid black;
  box-shadow: 10px 10px 5px black;
}

.card-img {
  border-radius: 10px;
  width: 100%;
}

.tag-name {
  padding: 2%;
  background-color: hsl(47, 88%, 63%);
  font-weight: 800;
  width: fit-content;
  border-radius: 10%;
  margin: 5% 0;
}

.public-date {
    font-weight: 500;
    font-size: 16px;
    color: hsl(0, 0%, 7%);
    margin-top: 0;
    margin-bottom: 5%;
}

.title {
    font-weight: 800;
    margin-bottom: 5%;
}

.description {
    font-weight: 500;
    font-size: 16px;
    color: hsl(0, 0%, 7%);
    margin-bottom: 5%;
}

.director-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.director-img {
    width: 10%;
}

.director {
    font-weight: 800;
}
}