<style>

/* =========================
   WRAPPER
========================= */

.vl-resource-wrapper{
max-width:1200px;
margin:60px auto 20px;
padding:0 20px;
}

/* =========================
   GROUPING
========================= */

.vl-resource-group{
margin-bottom:60px;
}

.vl-resource-heading{
font-size:22px;
font-weight:600;
margin-bottom:20px;
padding-bottom:8px;
border-bottom:1px solid #eee;
letter-spacing:.01em;
}

/* =========================
   GRID
========================= */

.vl-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:24px;
}

/* =========================
   CARD
========================= */

.vl-card{
display:block;
padding:18px;
border:1px solid #e6e6e6;
border-radius:10px;
background:#fff;
color:#111;
transition:.18s ease;
}

.vl-card:hover{
box-shadow:0 10px 24px rgba(0,0,0,.08);
transform:translateY(-3px);
}

/* =========================
   TYPE LABEL
========================= */

.vl-type{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color:#a229ce;
margin-bottom:6px;
}

/* =========================
   TITLE
========================= */

.vl-title{
font-size:16px;
font-weight:600;
line-height:1.4;
margin-bottom:10px;
}

/* =========================
   ACTIONS
========================= */

.vl-actions{
margin-top:10px;
}

.vl-download{
display:inline-block;
font-size:13px;
padding:7px 12px;
border-radius:5px;
background:#a229ce;
color:#fff;
text-decoration:none;
font-weight:500;
}

.vl-download:hover{
background:#8b1fb3;
}

/* =========================
   LOAD MORE (if reused)
========================= */

.vl-load{
display:block;
margin:50px auto 0;
padding:10px 20px;
background:#a229ce;
color:#fff;
border:none;
border-radius:6px;
font-size:14px;
cursor:pointer;
}

.vl-load:hover{
background:#8b1fb3;
}

/* loading state */
.vl-loading-text{
  font-size:14px;
  color:#666;
  margin-bottom:18px;
}

.vl-card-skeleton{
  pointer-events:none;
}

.vl-skeleton{
  border-radius:6px;
  background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);
  background-size:400% 100%;
  animation:vlShimmer 1.2s ease-in-out infinite;
}

.vl-skeleton-type{
  width:90px;
  height:12px;
  margin-bottom:10px;
}

.vl-skeleton-title{
  width:100%;
  height:16px;
  margin-bottom:8px;
}

.vl-skeleton-title.short{
  width:72%;
  margin-bottom:16px;
}

.vl-skeleton-button{
  width:110px;
  height:32px;
  border-radius:5px;
}

.vl-resource-error{
  max-width:1200px;
  margin:40px auto;
  padding:16px 18px;
  border:1px solid #eee;
  border-radius:10px;
  color:#555;
  background:#fafafa;
}

@keyframes vlShimmer{
  0%{background-position:100% 0;}
  100%{background-position:-100% 0;}
}

</style>