.blog-directory-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.blog-directory-card{
  position:relative;
  display:flex;
  min-height:310px;
  align-items:center;
  overflow:hidden;
  flex-direction:column;
  padding:28px 22px 22px;
  border:1px solid rgba(7,26,51,.16)!important;
  border-radius:0!important;
  background:#fff;
  box-shadow:none!important;
  text-align:center;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.blog-directory-card::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:4px;
  background:#ffc400;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
}

.blog-directory-card:hover,
.blog-directory-card:focus-within{
  border-color:#d7a900!important;
  box-shadow:0 20px 40px rgba(7,26,51,.12)!important;
  transform:translateY(-7px)!important;
}

.blog-directory-card:hover::before,
.blog-directory-card:focus-within::before{transform:scaleX(1)}

.blog-directory-icon{
  display:grid;
  width:58px;
  height:58px;
  flex:0 0 58px;
  place-items:center;
  margin-bottom:16px;
  background:#ffc400;
  color:#071a33;
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}

.blog-directory-card:hover .blog-directory-icon{
  background:#071a33;
  color:#ffc400;
  transform:rotate(-4deg);
}

.blog-directory-icon svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.blog-directory-tag{
  margin-bottom:8px;
  color:#a67800;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.blog-directory-card h3{
  margin:0 0 10px;
  color:#071a33;
  font-size:1.08rem;
  font-weight:600;
  line-height:1.3;
}

.blog-directory-card p{
  margin:0 0 20px;
  color:#64748b;
  font-size:.79rem;
  line-height:1.65;
}

.blog-directory-card > a{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:15px;
  border-top:1px solid rgba(7,26,51,.14);
  color:#071a33;
  font-size:.76rem;
  font-weight:700;
  text-align:left;
}

.blog-directory-card > a span{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  background:#ffc400;
  transition:transform .2s ease;
}

.blog-directory-card:hover > a span{transform:translateX(4px)}

@media(max-width:1020px){
  .blog-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
  .blog-directory-grid{grid-template-columns:1fr}
  .blog-directory-card{min-height:285px}
}

@media(prefers-reduced-motion:reduce){
  .blog-directory-card,
  .blog-directory-card::before,
  .blog-directory-icon,
  .blog-directory-card > a span{transition:none}
}