/* Tiles showing a plain product photo in place of one of Ben's cut-outs (.cell--photo / .tile--photo, set in the templates).
   The floating cut-out composition overlaps the label once the image is a full photo, so the photo gets its own grid cell,
   on a white card that fills that cell so a tall or wide photo still reads as a full-size image. */
.cell--photo { container-type: size; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: 6px 14px; }
.cell--photo .cell__label { grid-area: 1 / 1 / 2 / 2; max-width: none; }
.cell--photo .cell__goods { position: static; grid-area: 2 / 1 / 3 / 3; min-height: 0; display: flex; }
.cell--photo .cell__item { position: static; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 4px; background: #fff; border-radius: var(--r-2); box-shadow: 0 1px 3px rgba(28, 30, 27, .12); mix-blend-mode: normal; transform: none; }
.cell--photo .cell__item ~ .cell__item { display: none; }
.cell--photo:hover .cell__item { transform: scale(1.03); }
@media (max-width: 899px) {
	.cell--photo { padding: 10px; }
	.cell--photo .cell__name { font-size: 20px; }
}
@container (min-aspect-ratio: 2 / 1) { /* wide tiles: photo on the right, full height */
	.cell--photo .cell__goods { grid-area: 1 / 2 / 3 / 3; width: min(55cqw, 100cqh); }
}
@container (max-width: 240px) { /* small cells: smaller name so the photo keeps most of the height */
	.cell--photo .cell__name { font-size: 22px; }
	.cell--photo .cell__subs { display: none; }
}
@container (max-width: 180px) {
	.cell--photo .cell__name { font-size: 18px; }
}
@media (min-width: 900px) {
	.cell--photo:not(.cell--fishing) { padding: 14px 16px; }
}
.tile--photo .tile__img { background: #fff; }
.tile--photo .tile__img img { padding: 4%; object-fit: contain; }