.dg[data-v-091abc9dd34d106d] { padding: 56px 20px; background: var(--vb-surface, #f7f6fc);
}
.dg-wrap[data-v-091abc9dd34d106d] { max-width: 1180px; margin: 0 auto;
}
.dg-head[data-v-091abc9dd34d106d] { text-align: center; margin-bottom: 28px;
}
.dg-head h2[data-v-091abc9dd34d106d] { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); color: var(--vb-heading, #1f1b4d);
}
.dg-head p[data-v-091abc9dd34d106d] { margin: 0 auto; max-width: 620px; color: var(--vb-muted, #5f6b78); font-size: 16px;
}
.dg-grid[data-v-091abc9dd34d106d] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.dg-card[data-v-091abc9dd34d106d] { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--vb-primary, #3b2f8f); text-decoration: none;
}
.dg-card img[data-v-091abc9dd34d106d] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s;
}
.dg-card:hover img[data-v-091abc9dd34d106d] { transform: scale(1.05);
}
.dg-shade[data-v-091abc9dd34d106d] { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 12, 40, .8), rgba(15, 12, 40, .1) 60%);
}
.dg-body[data-v-091abc9dd34d106d] { position: absolute; inset-inline: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 4px; color: #fff; text-align: start;
}
.dg-body b[data-v-091abc9dd34d106d] { font-size: 21px;
}
.dg-body small[data-v-091abc9dd34d106d] { font-size: 13px; line-height: 1.4; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}