.catalog-bento-grid{display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(320px, auto); gap: 24px; margin-bottom: 40px}
.bento-card{background: #f8f8f8; border-radius: 20px; padding: 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; border: 1px solid var(--border-color); transition: transform 0.3s, box-shadow 0.3s; min-height: 320px}
.bento-card:hover{transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.06)}
.bento-large{grid-row: span 2; background: linear-gradient(145deg, #fdfbfb 0%, #f4f4f4 100%)}
.bento-content{position: relative; z-index: 2; max-width: 60%}
.bento-large .bento-content{max-width: 50%}
.bento-badge{display: inline-block; background: #fff; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05)}
.bento-title{font-size: 32px; font-weight: 800; color: var(--text-black); margin: 0 0 16px 0; line-height: 1.1}
.bento-large .bento-title{font-size: 40px}
.bento-desc{font-size: 15px; color: #666; margin-bottom: 24px; line-height: 1.5}
.bento-links{display: flex; flex-direction: column; gap: 12px}
.bento-links a{font-size: 15px; color: #555; text-decoration: none; display: flex; align-items: center; justify-content: space-between; padding-right: 16px; transition: color 0.2s}
.bento-links a:hover{color: var(--primary-color)}
.bento-links a iconify-icon{opacity: 0; transform: translateX(-10px); transition: all 0.2s}
.bento-links a:hover iconify-icon{opacity: 1; transform: translateX(0)}
.bento-bg{position: absolute; bottom: 0; right: 0; height: 100%; width: 60%; object-fit: cover; object-position: top center; z-index: 1; mask-image: linear-gradient(to right, transparent 0%, black 30%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%)}
.bento-bg img{width:100%; height:100%; object-fit: cover;}
.bento-bg.right-aligned{width: 50%; object-position: right top}
.bento-bg.bottom-aligned{height: 70%; width: 100%; object-position: bottom right; mask-image: linear-gradient(to top, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%)}
@media (max-width: 1200px){
	.catalog-bento-grid{grid-template-columns: 1fr}
    .bento-large{grid-row: auto}
    .bento-card{min-height: 280px}
}
@media (max-width: 576px){
	.bento-card{padding: 24px; min-height: auto}
    .bento-content{max-width: 100%; background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); padding: 20px; border-radius: 16px}
    .bento-large .bento-content{max-width: 100%}
    .bento-bg{width: 100%; height: 100%; mask-image: none; -webkit-mask-image: none}
    .bento-title, .bento-large .bento-title{font-size: 28px}
}