.image-container{position:relative;width:100%;overflow:hidden;border-radius:8px}.image-container img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:auto;max-width:100%;max-height:none}.recipe-image-container .image-container{aspect-ratio:4/3}.recipe-image-container .image-container img{width:100%;height:100%;object-fit:cover;object-position:center}.step-image-container .image-container{aspect-ratio:2/1;max-height:150px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:right}.step-image-container .image-container img{width:100%;max-height:150px;height:auto;object-fit:cover;display:block}.profile-image-container .image-container{aspect-ratio:1/1}.profile-image-container .image-container img{width:100%;height:100%;object-fit:cover;object-position:center}.category-image-container .image-container{aspect-ratio:1/1}.category-image-container .image-container img{width:100%;height:100%;object-fit:cover;object-position:center}.category-grid .category-image{width:100%!important;height:100%!important;object-fit:cover;object-position:center}.category-image-wrapper{position:relative;width:100%;height:100%}.category-placeholder{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-card) 100%);border:2px dashed var(--border-color);transition:all 0.3s ease}.category-placeholder i{opacity:.5;transition:all 0.3s ease}.category-card-responsive:hover .category-placeholder{background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-secondary) 100%);border-color:var(--color-primary)}.category-card-responsive:hover .category-placeholder i{opacity:.7;transform:scale(1.1);color:var(--color-primary)}.category-title-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgb(0 0 0 / .8));padding:1.5rem 1rem 1rem 1rem;z-index:2;pointer-events:none;overflow:hidden}.category-title-text{color:#fff;font-size:1rem;font-weight:600;margin:0;text-shadow:0 1px 3px rgb(0 0 0 / .8);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.category-card-responsive:hover .category-title-overlay{background:linear-gradient(transparent,rgb(0 0 0 / .8))}.category-card-responsive:hover .category-title-text{transform:translateY(-2px);transition:transform 0.2s ease}.ingredient-image-container .image-container{aspect-ratio:1/1}.ingredient-image-container .image-container img{width:100%;height:100%;object-fit:cover;object-position:center}.generic-image-container .image-container{aspect-ratio:16/9}.generic-image-container .image-container img{width:100%;height:100%;object-fit:cover;object-position:center}@media (max-width:768px){.recipe-image-container .image-container{aspect-ratio:4/3}.step-image-container .image-container{aspect-ratio:2/1;max-height:150px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:right}}@supports not (aspect-ratio:16/9){.recipe-image-container .image-container::before{content:"";display:block;padding-top:56.25%}.recipe-image-container .image-container img{position:absolute;top:0;left:0;width:100%;height:100%}.step-image-container .image-container::before{content:"";display:block;padding-top:75%}.step-image-container .image-container img{position:absolute;top:0;left:0;width:100%;height:100%}.profile-image-container .image-container::before{content:"";display:block;padding-top:100%}.profile-image-container .image-container img{position:absolute;top:0;left:0;width:100%;height:100%}.category-image-container .image-container::before{content:"";display:block;padding-top:66.67%}.category-image-container .image-container img{position:absolute;top:0;left:0;width:100%;height:100%}.ingredient-image-container .image-container::before{content:"";display:block;padding-top:100%}.ingredient-image-container .image-container img{position:absolute;top:0;left:0;width:100%;height:100%}}.image-container img{transition:opacity 0.3s ease}.image-container img[src=""]{opacity:0}.image-container img:not([src=""]){opacity:1}.clickable-image{transition:transform 0.3s ease,box-shadow 0.3s ease;transform-origin:center}.clickable-image:hover{transform:scale(1.02);box-shadow:0 4px 12px rgb(0 0 0 / .15)}.image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgb(0 0 0 / .3);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;border-radius:8px}.clickable-image:hover .image-overlay{opacity:1}.image-overlay i{color:#fff;font-size:1.5rem;text-shadow:0 2px 4px rgb(0 0 0 / .5)}