body
{
  background-color: #F4D04E;
  font-family: figtree, Arial, Helvetica, sans-serif;
}

main
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.blog-card
{
  background-color: white;
  display: flex;
  flex-direction: column;
  /*width: 384px;*/
  /*height: 522px;*/
  width: clamp(20.438rem, 19.183rem + 4.01vw, 24rem);
  height: clamp(31.313rem, 30.85rem + 1.48vw, 32.625rem);
  align-items: center;
  border-radius: 20px;
  border: solid black;
  border-width: 0.5px;
  box-shadow: 7px 7px  black;
  transition: box-shadow 0.15s;
}
.blog-card:hover
{
  box-shadow: 12px 12px  black;
  
}
.blog-card:hover .contents .title
{
  color: #F4D04E;
}


.thumbnail img
{
  /*width: 336px;*/
  width: clamp(17.438rem, 16.183rem + 4.01vw, 21rem);
  height: 200px;
  margin-top: 24px;
  justify-content: center;
}

.contents
{
  margin: 24px 24px 0px 24px;
}

.blog-author
{
  display: flex;
  flex-direction: row;
  
  
}

.blog-author img
{
  width: 32px;
  height: 32px;
  border-radius: 32px;
  object-fit: cover;
  
}

.contents .category
{
  border: none;
  width: 82px;
  height: 29px;
  background-color: #F4D04E;
  font-weight: 800;
  border-radius: 4px;
  /*font-size: 14px;*/
  font-size: clamp(0.75rem, 0.72rem + 0.13vw, 0.875rem) ;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.contents .title
{
  font-weight: bold;
  /*font-size: 24px;*/
  margin-bottom: 12px;
  transition: color 0.15s;
  font-size: clamp(1.25rem, 1.162rem + 0.28vw, 1.5rem);
}

.contents .date
{
  /*font-size: 14px;*/
  margin-bottom: 12px;
  font-size: clamp(0.75rem, 0.706rem + 0.14vw, 0.875rem);

}
.contents .desc
{
  margin-bottom: 24px;
  /*font-size: 16px;*/
  line-height: 24px;
  font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
  color: #6B6B6B;
}

p
{
  margin: 0px;
}


.blog-author
{
  align-items: center;
}

.blog-author p
{
  padding-left: 12px;
  font-weight: bold;
}