.hero{
  margin-top: 91px;
}
.hero .header-intro{
  text-align: center;
  padding: 0 24px;
  margin: 0 0 16px 0;
}
.header-intro h1{
  margin-bottom: 24px;
}

/* cards */
.card{
  padding: 8px 16px;
  margin: 16px 0;
  border-radius: var(--border-radius);
  background: linear-gradient(to bottom, #f4f4f420, #f4f4f410);
}
.card .pic img{
  border-radius: var(--border-radius);
}
.card .text{
  padding: 12px;
}
.card .date{
  margin: 8px 0;
  font-size:  var( --fs-xs);
  font-family: var(--roboto-sans);
  color: var(--seconary-word);
  font-weight: var(--fw-light);
}
.card h2{
  font-family: var(--roboto-sans);  
}
.card .btn-body .btn{
  padding: 8px 38px;
  line-height: 2;
}
.cards .pagination{
  display: flex;
  justify-content: center;
  margin-left: 72px;
}
.pagination .active{
  border: 1px solid var(--Neutral-color);
  border-radius: 25%;
}
.cards .pagination a{
  color: var(--Neutral-color);
  text-align: center;
  padding: 8px 16px;
  line-height: 3;
}
.cards .pagination img{
  width: 40px;
  height: 40px;
}

@media screen and (min-width: 734px){
  .card-items{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}