.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.main-heading{text-align:center;font-size:40px;font-weight:600;text-transform:uppercase}.main-description{text-align:center;font-size:22px}.portfolio-card{background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;border:1px solid #eee;position:relative;transition:transform .3s ease,box-shadow .3s ease}.portfolio-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px #0000001f}.portfolio-badge{position:absolute;top:16px;right:16px;background:#f0dddd;color:#000;font-size:14px;padding:6px 14px;border-radius:20px;z-index:2}.portfolio-image img{width:100%;height:200px;object-fit:cover}.portfolio-image-placeholder{height:200px;background:linear-gradient(180deg,#d1d5db,#9ca3af)}.portfolio-content{padding:22px}.portfolio-title{font-size:20px;font-weight:700;margin-bottom:8px}.portfolio-description{font-size:14px;color:#475569;margin-bottom:16px}.portfolio-price strong{display:block;font-size:20px;font-weight:500;margin-top:0;color:#000}.portfolio-buttons{margin-top:18px;display:flex;flex-direction:column;gap:10px}.portfolio-price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.portfolio-price-note{font-size:13px;font-weight:600;color:#2563eb;background:#eef2ff;padding:6px 10px;border-radius:999px;white-space:nowrap}.portfolio-variants{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.portfolio-variant-pill{padding:8px 14px;border-radius:999px;border:1px solid #e5e7eb;background:#f8fafc;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s ease}.portfolio-variant-pill:hover{background:#eef2ff;border-color:#6366f1}.portfolio-variant-pill.is-active{background:#2563eb;color:#fff;border-color:#2563eb}@media (max-width: 1200px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.portfolio-grid{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.portfolio-grid::-webkit-scrollbar{display:none}.portfolio-card{flex:0 0 90%;scroll-snap-align:start}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/custom-portfolio-card.css.map */