i am using a kalles theme and i want this section in kalles theme same.
in kalles theme it is not possible so i have to add custum theme anyone help me
It is a bento grid of tiles you can mix:
- big image or video tiles,
- small stat tiles (1000F, 300%),
- a wide media tile and a full-width banner.
- Each tile has its own size, media, heading and text.
Result
- Tiles arrange into a responsive mosaic. Pick a size per tile: small, large, wide or full banner.
- Any tile can hold an image or an autoplay muted video, with a heading and sub text on top.
- Collapses to a clean two-column layout on mobile.
Tested on a Kalles storefront.
How to add it
- Online Store > Themes > next to Kalles click … > Edit code.
- Under Sections click Add a new section, name it feature-bento, delete the sample content, paste the code below, and Save.
- Go to Customize, click Add section, choose Feature bento grid, and fill in your images, videos and text.
{%- comment -%}
Feature bento grid - mixed image/video/stat tiles in a mosaic.
Add via Online Store > Themes > Edit code > Sections > Add a new section.
{%- endcomment -%}
<style>
#fb-{{ section.id }} {
max-width: {{ section.settings.max_width }}px;
margin: 0 auto;
padding: {{ section.settings.padding_top }}px 16px {{ section.settings.padding_bottom }}px;
color: {{ section.settings.text_color }};
}
#fb-{{ section.id }} .fb__title {
font-size: {{ section.settings.heading_size }}px;
line-height: 1.15; margin: 0 0 28px; max-width: 900px;
}
#fb-{{ section.id }} .fb__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
grid-auto-rows: {{ section.settings.row_height }}px;
grid-auto-flow: dense; gap: {{ section.settings.gap }}px;
}
#fb-{{ section.id }} .fb__tile {
position: relative; overflow: hidden; border-radius: 16px;
background: {{ section.settings.tile_bg }};
display: flex; flex-direction: column; justify-content: flex-end;
padding: 22px; min-height: 0;
}
#fb-{{ section.id }} .fb__tile--large { grid-column: span 1; grid-row: span 2; }
#fb-{{ section.id }} .fb__tile--small { grid-column: span 1; grid-row: span 1; }
#fb-{{ section.id }} .fb__tile--wide { grid-column: span 3; grid-row: span 1; }
#fb-{{ section.id }} .fb__tile--tall { grid-column: span 2; grid-row: span 2; }
#fb-{{ section.id }} .fb__tile--full { grid-column: 1 / -1; grid-row: span 1; }
#fb-{{ section.id }} .fb__media {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
}
#fb-{{ section.id }} .fb__tile--hasmedia::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
}
#fb-{{ section.id }} .fb__body { position: relative; z-index: 2; }
#fb-{{ section.id }} .fb__tile--hasmedia .fb__body { color: #fff; }
#fb-{{ section.id }} .fb__eyebrow { font-size: 13px; opacity: .8; margin: 0 0 4px; letter-spacing: .02em; }
#fb-{{ section.id }} .fb__stat { font-size: 34px; font-weight: 700; margin: 0; line-height: 1.05; }
#fb-{{ section.id }} .fb__heading { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.15; }
#fb-{{ section.id }} .fb__text { font-size: 14px; opacity: .85; margin: 6px 0 0; }
#fb-{{ section.id }} .fb__play {
position: absolute; top: 16px; right: 16px; z-index: 3;
width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85);
display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25);
}
#fb-{{ section.id }} .fb__play::before {
content: ""; width: 0; height: 0;
border-style: solid; border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #fff; margin-left: 2px;
}
@media (max-width: 749px) {
#fb-{{ section.id }} .fb__grid { grid-template-columns: repeat(2, 1fr); }
#fb-{{ section.id }} .fb__tile--wide, #fb-{{ section.id }} .fb__tile--tall { grid-column: 1 / -1; }
#fb-{{ section.id }} .fb__tile--large { grid-column: span 2; }
}
</style>
<div id="fb-{{ section.id }}">
{%- if section.settings.heading != blank -%}
<h2 class="fb__title">{{ section.settings.heading }}</h2>
{%- endif -%}
<div class="fb__grid">
{%- for block in section.blocks -%}
{%- assign has_video = false -%}
{%- if block.settings.video != blank or block.settings.mp4_url != blank -%}{%- assign has_video = true -%}{%- endif -%}
{%- assign has_media = false -%}
{%- if block.settings.image != blank or has_video -%}{%- assign has_media = true -%}{%- endif -%}
<div class="fb__tile fb__tile--{{ block.settings.size }}{% if has_media %} fb__tile--hasmedia{% endif %}" {{ block.shopify_attributes }}>
{%- if has_video -%}
<video class="fb__media" playsinline muted loop autoplay preload="none"
{%- if block.settings.image != blank %} poster="{{ block.settings.image | image_url: width: 800 }}"{% endif -%}>
{%- if block.settings.video != blank -%}
{%- for src in block.settings.video.sources -%}{%- if src.format == 'mp4' -%}<source src="{{ src.url }}" type="video/mp4">{%- endif -%}{%- endfor -%}
{%- else -%}
<source src="{{ block.settings.mp4_url }}" type="video/mp4">
{%- endif -%}
</video>
<span class="fb__play" aria-hidden="true"></span>
{%- elsif block.settings.image != blank -%}
<img class="fb__media" src="{{ block.settings.image | image_url: width: 900 }}" alt="{{ block.settings.heading | escape }}" loading="lazy">
{%- endif -%}
<div class="fb__body">
{%- if block.settings.eyebrow != blank -%}<p class="fb__eyebrow">{{ block.settings.eyebrow }}</p>{%- endif -%}
{%- if block.settings.stat != blank -%}<p class="fb__stat">{{ block.settings.stat }}</p>{%- endif -%}
{%- if block.settings.heading != blank -%}<p class="fb__heading">{{ block.settings.heading }}</p>{%- endif -%}
{%- if block.settings.text != blank -%}<p class="fb__text">{{ block.settings.text }}</p>{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
</div>
{% schema %}
{
"name": "Feature bento grid",
"tag": "section",
"class": "section-feature-bento",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "Cook like a pro in your own home." },
{ "type": "range", "id": "heading_size", "min": 20, "max": 56, "step": 2, "unit": "px", "label": "Heading size", "default": 40 },
{ "type": "color", "id": "text_color", "label": "Text color", "default": "#f4f2ee" },
{ "type": "color", "id": "tile_bg", "label": "Empty tile background", "default": "#2b2926" },
{ "type": "range", "id": "row_height", "min": 120, "max": 320, "step": 10, "unit": "px", "label": "Row height", "default": 230 },
{ "type": "range", "id": "gap", "min": 6, "max": 32, "step": 2, "unit": "px", "label": "Gap", "default": 16 },
{ "type": "range", "id": "max_width", "min": 800, "max": 1600, "step": 20, "unit": "px", "label": "Section max width", "default": 1200 },
{ "type": "range", "id": "padding_top", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding top", "default": 48 },
{ "type": "range", "id": "padding_bottom", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding bottom", "default": 48 }
],
"blocks": [
{
"type": "tile",
"name": "Tile",
"settings": [
{ "type": "select", "id": "size", "label": "Tile size", "default": "small", "options": [
{ "value": "small", "label": "Small (1x1)" },
{ "value": "large", "label": "Large (1 wide, 2 tall)" },
{ "value": "tall", "label": "Big (2x2)" },
{ "value": "wide", "label": "Wide (3 wide)" },
{ "value": "full", "label": "Full width banner" }
] },
{ "type": "image_picker", "id": "image", "label": "Image (also used as video cover)" },
{ "type": "video", "id": "video", "label": "Video (upload)" },
{ "type": "text", "id": "mp4_url", "label": "or paste an MP4 URL" },
{ "type": "text", "id": "eyebrow", "label": "Small label above" },
{ "type": "text", "id": "stat", "label": "Big stat (e.g. 1000°F)" },
{ "type": "text", "id": "heading", "label": "Heading" },
{ "type": "text", "id": "text", "label": "Sub text" }
]
}
],
"max_blocks": 12,
"presets": [
{
"name": "Feature bento grid",
"blocks": [
{ "type": "tile", "settings": { "size": "large", "eyebrow": "Designed for", "heading": "Ultimate Performance" } },
{ "type": "tile", "settings": { "size": "small", "stat": "1000°F", "text": "high heat safe" } },
{ "type": "tile", "settings": { "size": "small", "heading": "Made without PFAS" } },
{ "type": "tile", "settings": { "size": "small", "stat": "300%", "text": "harder than steel" } },
{ "type": "tile", "settings": { "size": "wide", "heading": "In the pan" } },
{ "type": "tile", "settings": { "size": "full", "eyebrow": "For now, for always", "heading": "Lasts a Lifetime" } }
]
}
]
}
{% endschema %}
Hi @saqlain1,
- In your theme’s code editor, add a new file under
Assetscalledsection-cookware-showcase.cssand paste in the CSS. - Add a new file under
Sectionscalledcookware-showcase-section.liquidand paste in the section code. - Go to Customize → Add section → it will appear as “Cookware showcase grid”.
- Fill in your images/video, heading, and stat card content from the theme editor sidebar no code editing needed after setup.
cookware-showcase-section.liquid
{{ 'section-cookware-showcase.css' | asset_url | stylesheet_tag }}
{%- liquid
assign left_media_type = section.settings.left_media_type
assign right_media_type = section.settings.right_media_type
assign stat_blocks = section.blocks | where: 'type', 'stat'
-%}
<section
class="tc-section"
id="tc-section-{{ section.id }}"
style="
--tc-bg: {{ section.settings.section_bg_color }};
--tc-text: {{ section.settings.text_color }};
--tc-card-bg: {{ section.settings.card_bg_color }};
--tc-radius: {{ section.settings.corner_radius }}px;
--tc-gap: {{ section.settings.grid_gap }}px;
--tc-pt-mobile: {{ section.settings.padding_top_mobile }}px;
--tc-pb-mobile: {{ section.settings.padding_bottom_mobile }}px;
--tc-pt-desktop: {{ section.settings.padding_top }}px;
--tc-pb-desktop: {{ section.settings.padding_bottom }}px;
"
>
<div class="tc-container" style="max-width: {{ section.settings.container_width }}px;">
{%- if section.settings.top_heading != blank -%}
<div class="tc-heading">
{{ section.settings.top_heading }}
</div>
{%- endif -%}
<div class="tc-grid">
{%- comment -%} ---------- LEFT TALL MEDIA BLOCK ---------- {%- endcomment -%}
<div class="tc-cell tc-left">
{%- if left_media_type == 'video' and section.settings.left_video != blank -%}
<div class="tc-media-wrap">
{{ section.settings.left_video | video_tag: autoplay: true, loop: true, muted: true, controls: false, class: 'tc-media tc-video-el' }}
</div>
{%- elsif section.settings.left_image != blank -%}
<div class="tc-media-wrap">
<img
src="{{ section.settings.left_image | image_url: width: 900 }}"
srcset="
{{ section.settings.left_image | image_url: width: 450 }} 450w,
{{ section.settings.left_image | image_url: width: 700 }} 700w,
{{ section.settings.left_image | image_url: width: 900 }} 900w,
{{ section.settings.left_image | image_url: width: 1200 }} 1200w
"
sizes="(min-width: 990px) 25vw, 100vw"
loading="lazy"
alt="{{ section.settings.left_image.alt | escape }}"
class="tc-media"
width="{{ section.settings.left_image.width }}"
height="{{ section.settings.left_image.height }}"
>
</div>
{%- else -%}
<div class="tc-media-wrap tc-placeholder">{{ 'image' | placeholder_svg_tag: 'tc-placeholder-svg' }}</div>
{%- endif -%}
{%- if section.settings.left_show_pause_icon -%}
<button type="button" class="tc-pause-btn" aria-label="Play or pause media" data-tc-toggle-media>
<span class="tc-pause-icon">
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><rect x="5" y="4" width="4" height="16"></rect><rect x="15" y="4" width="4" height="16"></rect></svg>
</span>
</button>
{%- endif -%}
<div class="tc-overlay-text">
{%- if section.settings.left_label != blank -%}
<p class="tc-eyebrow">{{ section.settings.left_label }}</p>
{%- endif -%}
{%- if section.settings.left_title != blank -%}
<h3 class="tc-cell-title">{{ section.settings.left_title }}</h3>
{%- endif -%}
</div>
</div>
{%- comment -%} ---------- STAT BLOCKS ---------- {%- endcomment -%}
<div class="tc-stats">
{%- for block in stat_blocks -%}
<div class="tc-cell tc-stat" {{ block.shopify_attributes }}>
{%- if block.settings.stat_style == 'logo_image' and block.settings.stat_image != blank -%}
<img
src="{{ block.settings.stat_image | image_url: width: 400 }}"
loading="lazy"
alt="{{ block.settings.stat_image.alt | escape }}"
class="tc-stat-logo"
width="{{ block.settings.stat_image.width }}"
height="{{ block.settings.stat_image.height }}"
>
{%- else -%}
{%- if block.settings.stat_value != blank -%}
<p class="tc-stat-value">{{ block.settings.stat_value }}</p>
{%- endif -%}
{%- endif -%}
{%- if block.settings.stat_label != blank -%}
<p class="tc-stat-label">{{ block.settings.stat_label }}</p>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- comment -%} ---------- WIDE VIDEO/IMAGE BLOCK ---------- {%- endcomment -%}
<div class="tc-cell tc-video">
{%- if right_media_type == 'video' and section.settings.right_video != blank -%}
<div class="tc-media-wrap">
{{ section.settings.right_video | video_tag: autoplay: true, loop: true, muted: true, controls: false, class: 'tc-media tc-video-el' }}
</div>
{%- elsif section.settings.right_image != blank -%}
<div class="tc-media-wrap">
<img
src="{{ section.settings.right_image | image_url: width: 1200 }}"
srcset="
{{ section.settings.right_image | image_url: width: 600 }} 600w,
{{ section.settings.right_image | image_url: width: 900 }} 900w,
{{ section.settings.right_image | image_url: width: 1200 }} 1200w,
{{ section.settings.right_image | image_url: width: 1600 }} 1600w
"
sizes="(min-width: 990px) 55vw, 100vw"
loading="lazy"
alt="{{ section.settings.right_image.alt | escape }}"
class="tc-media"
width="{{ section.settings.right_image.width }}"
height="{{ section.settings.right_image.height }}"
>
</div>
{%- else -%}
<div class="tc-media-wrap tc-placeholder">{{ 'lifestyle-1' | placeholder_svg_tag: 'tc-placeholder-svg' }}</div>
{%- endif -%}
{%- if section.settings.right_show_pause_icon -%}
<button type="button" class="tc-pause-btn" aria-label="Play or pause media" data-tc-toggle-media>
<span class="tc-pause-icon">
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><rect x="5" y="4" width="4" height="16"></rect><rect x="15" y="4" width="4" height="16"></rect></svg>
</span>
</button>
{%- endif -%}
</div>
{%- comment -%} ---------- FULL WIDTH BOTTOM BANNER ---------- {%- endcomment -%}
<div class="tc-cell tc-bottom">
{%- if section.settings.bottom_image != blank -%}
<div class="tc-media-wrap">
<img
src="{{ section.settings.bottom_image | image_url: width: 1600 }}"
srcset="
{{ section.settings.bottom_image | image_url: width: 800 }} 800w,
{{ section.settings.bottom_image | image_url: width: 1200 }} 1200w,
{{ section.settings.bottom_image | image_url: width: 1600 }} 1600w,
{{ section.settings.bottom_image | image_url: width: 2000 }} 2000w
"
sizes="100vw"
loading="lazy"
alt="{{ section.settings.bottom_image.alt | escape }}"
class="tc-media"
width="{{ section.settings.bottom_image.width }}"
height="{{ section.settings.bottom_image.height }}"
>
</div>
{%- else -%}
<div class="tc-media-wrap tc-placeholder">{{ 'lifestyle-2' | placeholder_svg_tag: 'tc-placeholder-svg' }}</div>
{%- endif -%}
<div class="tc-overlay-text tc-overlay-text--bottom">
{%- if section.settings.bottom_eyebrow != blank -%}
<p class="tc-eyebrow tc-eyebrow--accent">{{ section.settings.bottom_eyebrow }}</p>
{%- endif -%}
{%- if section.settings.bottom_title != blank -%}
<h3 class="tc-cell-title">{{ section.settings.bottom_title }}</h3>
{%- endif -%}
{%- if section.settings.bottom_description != blank -%}
<div class="tc-bottom-desc">{{ section.settings.bottom_description }}</div>
{%- endif -%}
</div>
</div>
</div>
</div>
</section>
<script>
(function () {
var section = document.getElementById('tc-section-{{ section.id }}');
if (!section) return;
var buttons = section.querySelectorAll('[data-tc-toggle-media]');
buttons.forEach(function (btn) {
btn.addEventListener('click', function () {
var wrap = btn.closest('.tc-cell');
var video = wrap && wrap.querySelector('video');
if (!video) return;
if (video.paused) {
video.play();
btn.classList.remove('is-paused');
} else {
video.pause();
btn.classList.add('is-paused');
}
});
});
})();
</script>
{% schema %}
{
"name": "Cookware showcase grid",
"tag": "section",
"class": "tc-showcase-section",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "container_width",
"label": "Max content width (px)",
"min": 960,
"max": 1600,
"step": 20,
"default": 1200
},
{
"type": "range",
"id": "grid_gap",
"label": "Grid gap (px)",
"min": 0,
"max": 40,
"step": 2,
"default": 16
},
{
"type": "range",
"id": "corner_radius",
"label": "Corner radius (px)",
"min": 0,
"max": 32,
"step": 2,
"default": 0
},
{
"type": "range",
"id": "padding_top",
"label": "Padding top - desktop (px)",
"min": 0,
"max": 120,
"step": 4,
"default": 60
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding bottom - desktop (px)",
"min": 0,
"max": 120,
"step": 4,
"default": 60
},
{
"type": "range",
"id": "padding_top_mobile",
"label": "Padding top - mobile (px)",
"min": 0,
"max": 80,
"step": 4,
"default": 32
},
{
"type": "range",
"id": "padding_bottom_mobile",
"label": "Padding bottom - mobile (px)",
"min": 0,
"max": 80,
"step": 4,
"default": 32
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "section_bg_color",
"label": "Section background",
"default": "#2b2926"
},
{
"type": "color",
"id": "card_bg_color",
"label": "Stat card background",
"default": "#3a3733"
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#ffffff"
},
{
"type": "header",
"content": "Top heading"
},
{
"type": "richtext",
"id": "top_heading",
"label": "Heading",
"default": "<p>Cook like a pro in your own home with our chef-approved, high-performance titanium cookware built to last a lifetime.</p>"
},
{
"type": "header",
"content": "Left media block (Ultimate Performance)"
},
{
"type": "select",
"id": "left_media_type",
"label": "Media type",
"options": [
{ "value": "image", "label": "Image" },
{ "value": "video", "label": "Video" }
],
"default": "image"
},
{
"type": "image_picker",
"id": "left_image",
"label": "Image"
},
{
"type": "video",
"id": "left_video",
"label": "Video (used if media type is Video)"
},
{
"type": "checkbox",
"id": "left_show_pause_icon",
"label": "Show play/pause control",
"default": true
},
{
"type": "text",
"id": "left_label",
"label": "Eyebrow label",
"default": "Designed for"
},
{
"type": "text",
"id": "left_title",
"label": "Title",
"default": "Ultimate Performance"
},
{
"type": "header",
"content": "Wide media block (lifestyle video)"
},
{
"type": "select",
"id": "right_media_type",
"label": "Media type",
"options": [
{ "value": "image", "label": "Image" },
{ "value": "video", "label": "Video" }
],
"default": "image"
},
{
"type": "image_picker",
"id": "right_image",
"label": "Image"
},
{
"type": "video",
"id": "right_video",
"label": "Video (used if media type is Video)"
},
{
"type": "checkbox",
"id": "right_show_pause_icon",
"label": "Show play/pause control",
"default": true
},
{
"type": "header",
"content": "Bottom full-width banner"
},
{
"type": "image_picker",
"id": "bottom_image",
"label": "Image"
},
{
"type": "text",
"id": "bottom_eyebrow",
"label": "Eyebrow label",
"default": "For now, for always"
},
{
"type": "text",
"id": "bottom_title",
"label": "Title",
"default": "Lasts a Lifetime"
},
{
"type": "richtext",
"id": "bottom_description",
"label": "Description",
"default": "<p>Powered by a fusion of ultra-durable, high-performance, non-toxic materials</p>"
}
],
"blocks": [
{
"type": "stat",
"name": "Stat card",
"settings": [
{
"type": "select",
"id": "stat_style",
"label": "Content type",
"options": [
{ "value": "text", "label": "Number / text" },
{ "value": "logo_image", "label": "Logo image" }
],
"default": "text"
},
{
"type": "text",
"id": "stat_value",
"label": "Big value (e.g. 1000\u00b0F*)",
"default": "1000\u00b0F*"
},
{
"type": "image_picker",
"id": "stat_image",
"label": "Logo image (used if content type is Logo image)"
},
{
"type": "text",
"id": "stat_label",
"label": "Label",
"default": "high heat safe"
}
]
}
],
"presets": [
{
"name": "Cookware showcase grid",
"blocks": [
{ "type": "stat", "settings": { "stat_style": "text", "stat_value": "1000\u00b0F*", "stat_label": "high heat safe (*Gold: 750\u00b0F)" } },
{ "type": "stat", "settings": { "stat_style": "logo_image", "stat_label": "" } },
{ "type": "stat", "settings": { "stat_style": "text", "stat_value": "300%", "stat_label": "harder than stainless steel" } }
]
}
]
}
{% endschema %}
section-cookware-showcase.css
/* ==========================================================================
Cookware Showcase Grid Section
Place this file in your theme's /assets folder.
========================================================================== */
.tc-section {
background: var(--tc-bg, #2b2926);
color: var(--tc-text, #ffffff);
padding-top: var(--tc-pt-mobile, 32px);
padding-bottom: var(--tc-pb-mobile, 32px);
}
@media screen and (min-width: 750px) {
.tc-section {
padding-top: var(--tc-pt-desktop, 60px);
padding-bottom: var(--tc-pb-desktop, 60px);
}
}
.tc-container {
margin: 0 auto;
padding: 0 20px;
}
@media screen and (min-width: 750px) {
.tc-container {
padding: 0 32px;
}
}
/* ---------- Heading ---------- */
.tc-heading {
font-size: 22px;
line-height: 1.35;
font-family: var(--font-heading-family, Georgia, 'Times New Roman', serif);
max-width: 720px;
margin: 0 0 24px;
color: var(--tc-text, #ffffff);
}
@media screen and (min-width: 750px) {
.tc-heading {
font-size: 28px;
margin-bottom: 32px;
}
}
.tc-heading p {
margin: 0;
}
/* ---------- Grid ---------- */
.tc-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"left"
"stats"
"video"
"bottom";
gap: var(--tc-gap, 16px);
}
@media screen and (min-width: 750px) {
.tc-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"left stats stats stats"
"left video video video"
"bottom bottom bottom bottom";
}
}
.tc-left { grid-area: left; }
.tc-stats { grid-area: stats; }
.tc-video { grid-area: video; }
.tc-bottom { grid-area: bottom; }
/* ---------- Generic cell ---------- */
.tc-cell {
position: relative;
overflow: hidden;
border-radius: var(--tc-radius, 0px);
background: var(--tc-card-bg, #3a3733);
min-height: 220px;
}
.tc-left {
min-height: 320px;
}
@media screen and (min-width: 750px) {
.tc-left {
min-height: 100%;
}
}
.tc-video {
min-height: 220px;
}
@media screen and (min-width: 750px) {
.tc-video {
min-height: 0;
}
}
.tc-bottom {
min-height: 320px;
}
@media screen and (min-width: 990px) {
.tc-bottom {
min-height: 420px;
}
}
/* ---------- Media ---------- */
.tc-media-wrap {
position: absolute;
inset: 0;
}
.tc-media,
.tc-media-wrap video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tc-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: #444139;
}
.tc-placeholder-svg {
width: 100%;
height: 100%;
opacity: 0.5;
}
/* ---------- Overlay text ---------- */
.tc-overlay-text {
position: relative;
z-index: 2;
padding: 20px;
}
.tc-overlay-text--bottom {
padding: 24px;
max-width: 420px;
}
@media screen and (min-width: 990px) {
.tc-overlay-text--bottom {
padding: 40px;
}
}
.tc-eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 8px;
opacity: 0.85;
}
.tc-eyebrow--accent {
color: #e07a4e;
opacity: 1;
}
.tc-cell-title {
font-family: var(--font-heading-family, Georgia, 'Times New Roman', serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
}
@media screen and (min-width: 990px) {
.tc-cell-title {
font-size: 32px;
}
}
.tc-bottom-desc {
font-size: 13px;
line-height: 1.5;
margin-top: 10px;
opacity: 0.9;
max-width: 320px;
}
.tc-bottom-desc p {
margin: 0;
}
/* ---------- Stats row ---------- */
.tc-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--tc-gap, 16px);
}
@media screen and (max-width: 749px) {
.tc-stats {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
.tc-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px 12px;
min-height: 140px;
}
.tc-stat-value {
font-family: var(--font-heading-family, Georgia, 'Times New Roman', serif);
font-size: 26px;
margin: 0 0 6px;
}
@media screen and (min-width: 990px) {
.tc-stat-value {
font-size: 32px;
}
}
.tc-stat-label {
font-size: 12px;
line-height: 1.4;
margin: 0;
opacity: 0.85;
max-width: 140px;
}
.tc-stat-logo {
max-width: 70%;
max-height: 70px;
object-fit: contain;
margin-bottom: 8px;
}
/* ---------- Pause / play control ---------- */
.tc-pause-btn {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.7);
background: rgba(0, 0, 0, 0.2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background 0.2s ease;
}
.tc-pause-btn:hover {
background: rgba(0, 0, 0, 0.4);
}
.tc-pause-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.tc-media-wrap video {
/* Still shows the video's poster frame; autoplay JS still runs
but browsers largely respect reduced-motion via system settings. */
}
}