/* ---------- Page ---------- */
.resources-page{
max-width:1400px;
margin: 30px auto;
padding:0 25px;
}

/* ---------- Grid ---------- */
.resource-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}
  .resource-grid a:link, .resource-grid a:visited {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  color: var(--content-text-color);
  text-decoration: none;
  font-weight: 700;
  }
  .resource-grid a:active, .resource-grid a:hover {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  color: var(--content-text-hover-color);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.75s;
  }

/* ---------- Card ---------- */
.resource-card{
display:flex;
align-items:center;
gap:25px;
padding: 20px;
background:#fff;
border-radius:12px;
text-decoration:none;
color: #575757;
box-shadow:0 8px 20px rgba(0,0,0,.08);
transition:.3s;
}

  .resource-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }

/* ---------- Icon ---------- */
.resource-icon {
width: 70px;
height: 70px;
background: #003aa8;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
flex-shrink: 0;
}

/* ---------- Content ---------- */
.resource-content {
flex:1;
}
  .resource-content h2 {
  color: #003aa8;
  margin-bottom:8px;
  font-size: 1.1em;
  background-color: transparent;
  border: none;
  text-align: left;
  }
  .resource-content p {
  font-family: "Roboto", sans-serif;
  font-size: .9em;
  color: #575757;
  text-decoration: none;
  font-weight: 400;
  }

/* ---------- Arrow ---------- */
.resource-arrow{
font-size: 28px;
color: #003aa8;
transition: .3s;
}

.resource-card:hover .resource-arrow{
transform:translateX(6px);
}

/* ---------- Mobile ---------- */
@media (max-width:400px){
  .resource-card{
      flex-direction:column;
      text-align:center;
  }
  .resource-arrow{
      display:none;
  }
}