1import{d as j}from"./GlobalStylesStore-CHYE5Nly.js";import{T as z,h as e}from"./TemplateElement-CdZ7OCoX.js";import{w as a,o as d}from"./directives-CgZXbjBP.js";import{b as D}from"./video-Citjh9G3.js";import{r as H}from"./images-xEniX0qD.js";import"./StyledElement-7gi18rn4.js";const O="mb-bento{display:block}@media (min-width: 1024px){mb-bento{max-width:80%;margin-inline:auto}}",i=(t,s)=>a(t==null?void 0:t.url,e`<a 2 href="${t==null?void 0:t.url}" 3 class="stretched-link ${(t==null?void 0:t.cssClasses)||""}" 4 element="bento" 5 ${d(t==null?void 0:t.trackingLabel,"tracking-label",t==null?void 0:t.trackingLabel)} 6 >${s}</a 7 >`,s),q=(t,s)=>a(t==null?void 0:t.url,e`<a 8 href="${t==null?void 0:t.url}" 9 class="stretched-link block w-full h-full min-h-0 ${(t==null?void 0:t.cssClasses)||""}" 10 element="bento" 11 ${d(t==null?void 0:t.text,"aria-label",t==null?void 0:t.text)} 12 ${d(t==null?void 0:t.trackingLabel,"tracking-label",t==null?void 0:t.trackingLabel)} 13 >${s}</a 14 >`,s);class E extends z{constructor(){super({styles:[O]})}properties(){return{portraitCard:null,landscapeCard:null,squareCard1:null,squareCard2:null}}template(){var g,n,x,f,h,u;const s=[this.squareCard1,this.squareCard2],o=!!this.portraitCard.video,c=!!((g=this.portraitCard.image)!=null&&g.src),p=o||c,L=!!this.portraitCard.title,I=!!this.landscapeCard.title,T=!this.landscapeCard.title&&!this.landscapeCard.kicker,m=e`<img 15 loading="lazy" 16 src="${(n=this.landscapeCard.image)==null?void 0:n.src}" 17 srcset="${(x=this.landscapeCard.image)==null?void 0:x.srcset}" 18 sizes="(min-width: 1440px) 340px, (min-width: 1024px) 25vw, 75vw" 19 alt="${(f=this.landscapeCard.image)==null?void 0:f.alt}" 20 class="h-full w-full object-cover rounded-lg lg:rounded-r-lg lg:rounded-l-none" 21 />`;return e` 22 <div class="flex flex-col lg:grid lg:grid-cols-10 gap-fix-m"> 23 <figure 24 class="col-span-4 w-full relative m-0 rounded-[var(--mdx-sys-border-radius-lg)] overflow-hidden aspect-square lg:aspect-auto min-h-0 ${a(!p&&this.portraitCard.color==="light","bg-primary-subtle1 text-primary","bg-primary text-primary-onDefault")}" 25 > 26 ${a(o,D(this.portraitCard.video,{poster:(h=this.portraitCard.image)==null?void 0:h.src}),a(c,H(this.portraitCard.image,"w-full h-full object-cover",!1,"auto","(min-width: 1024px) 40vw, 100vw")))} 27 ${a(p,e` 28 <div 29 class="absolute inset-0" 30 style="background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 68%, rgba(0, 0, 0, 0.38) 73.76%, rgba(0, 0, 0, 0.50) 91.04%);" 31 /> 32 `)} 33 34 <figcaption class="absolute inset-0 flex flex-col justify-end p-fix-m"> 35 ${a(this.portraitCard.kicker,e` 36 <p class="fix-body2 mb-0 mt-0"> 37 ${L?this.portraitCard.kicker:i(this.portraitCard.link,this.portraitCard.kicker)} 38 </p> 39 `)} 40 ${a(this.portraitCard.title,e` 41 <p class="fix-title2-medium mt-fix-2xs mb-0 text-balance"> 42 ${i(this.portraitCard.link,this.portraitCard.title)} 43 </p> 44 `)} 45 ${a(this.portraitCard.text,e` 46 <p class="fix-body2 font-normal mt-fix-2xs mb-0 text-balance"> 47 ${this.portraitCard.text} 48 </p> 49 `)} 50 </figcaption> 51 </figure> 52 <div class="col-span-6 flex flex-col lg:grid grid-cols-1 lg:grid-cols-2 grid-rows-2 gap-fix-m"> 53 <div 54 class="relative col-span-2 rounded-[var(--mdx-sys-border-radius-lg)] ${a(this.landscapeCard.color==="light","bg-primary-subtle1 text-primary","bg-primary text-primary-onDefault")}" 55 > 56 <div class="flex flex-col lg:flex-row items-stretch gap-0 h-full"> 57 <div 58 class="pt-fix-s pb-0 px-fix-s lg:self-end lg:pt-fix-m lg:pb-fix-m lg:pl-fix-m lg:pr-0 grow" 59 > 60 ${a(this.landscapeCard.kicker,e` 61 <p class="fix-body2-medium mb-0 mt-0"> 62 ${I?this.landscapeCard.kicker:i(this.landscapeCard.link,this.landscapeCard.kicker)} 63 </p> 64 `)} 65 ${a(this.landscapeCard.title,e` 66 <p class="fix-title2-medium mb-0 mt-fix-2xs text-balance"> 67 ${i(this.landscapeCard.link,this.landscapeCard.title)} 68 </p> 69 `)} 70 ${a(this.landscapeCard.text,e` 71 <p class="fix-body2 font-normal mb-0 mt-fix-2xs text-balance"> 72 ${this.landscapeCard.text} 73 </p> 74 `)} 75 </div> 76 ${a((u=this.landscapeCard.image)==null?void 0:u.src,e` 77 <div 78 class="overflow-hidden [contain:size] aspect-[4/5] w-3/4 mx-auto lg:mx-0 lg:w-auto lg:h-full lg:shrink-0" 79 > 80 ${T?q(this.landscapeCard.link,m):m} 81 </div> 82 `)} 83 </div> 84 </div> 85 ${s.map((r,V)=>{var $,v,y,w;const b=($=r.image)==null?void 0:$.src,l=r.text,C=e`<img 86 loading="lazy" 87 src="${(v=r.image)==null?void 0:v.src}" 88 srcset="${(y=r.image)==null?void 0:y.srcset}" 89 sizes="(min-width: 1440px) 340px, (min-width: 1024px) 30vw, 100vw" 90 alt="${(w=r.image)==null?void 0:w.alt}" 91 class="min-h-0 w-full object-cover ${a(l,"rounded-b-lg flex-1","rounded-[var(--mdx-sys-border-radius-lg)] h-full")}" 92 />`;return e` 93 <div 94 class="relative h-full rounded-[var(--mdx-sys-border-radius-lg)] flex flex-col items-center justify-center text-center col-span-1 aspect-square w-full gap-fix-m ${a(r.color==="light","bg-primary-subtle1 text-primary","bg-primary text-primary-onDefault")}" 95 > 96 ${a(l,e`<p 97 class="shrink-0 content-center lg:content-end mb-0 px-fix-m pt-fix-m ${a(b,"fix-body1","fix-title2-medium")}" 98 > 99 ${i(r.link,r.text)} 100 </p>`)} 101 ${a(b,l?C:q(r.link,C))} 102 </div> 103 `})} 104 </div> 105 </div> 106 `}}j("mb-bento",E);export{E as default}; 107//# sourceMappingURL=bento.js-3_UrhgBc.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.