{#if templateIndex >= 0} <Subtitle {templateIndex} /> <Content {templateIndex} /> <Date {templateIndex} /> <Time {templateIndex} /> <Weekday {templateIndex} /> <Address {templateIndex} /> <City {templateIndex} /> {/if} {#if $organizedBy[0] && $colabs[0]} <div class="orgcolab"> <div class="org">Organiza:</div> <div class="colab">Colabora:</div> <div class="orgmixed"> {#each $organizedBy as organization} <div class="organization"> <img src={organization.image} alt={organization.text} /> <div class="caption">{organization.text}</div> </div> {/each} </div> <div class="colabmixed"> {#each $colabs as organization} <div class="organization"> <img src={organization.image} alt={organization.text} /> <div class="caption">{organization.text}</div> </div> {/each} </div> </div> {/if} {#if $organizedBy[0] && !$colabs[0]} <div class="imagetitle">Organiza:</div> <div class="organized-by"> {#each $organizedBy as organization} <div class="organization"> <img src={organization.image} alt={organization.text} /> <div class="caption">{organization.text}</div> </div> {/each} </div> {/if} {#if $colabs[0] && !$organizedBy[0]} <div class="imagetitle">Colabora:</div> <div class="organized-by"> {#each $colabs as organization} <div class="organization"> <img src={organization.image} alt={organization.text} /> <div class="caption">{organization.text}</div> </div> {/each} </div> {/if} </div> <div class="text"> <Text /> </div> </div> <style> .preview { padding: 8px; /* display: grid; */ /* justify-content: center; */ /* grid-template-columns: 1fr; */ /* align-items: start; */ } .result { display: block; width: 600px; /* height: 8px; */ aspect-ratio: 1/1.4142; /* min-height: 842px; */ /* align-self: center; */ /* width: auto; */ background-size: cover; position: relative; /* padding: 1rem; */ } .imagetitle { position: absolute; top: 725px; left: 16px; font-size: 0.8rem; color: #444; text-transform: uppercase; } .organized-by { position: absolute; top: 745px; left: 1rem; right: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr)); grid-template-rows: min-content; grid-auto-rows: auto; justify-content: center; align-items: center; } .organization { margin: 0 1rem; display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center; } .organization img { max-height: 64px; max-width: 128px; margin: 0 auto; opacity: 100%; } .caption { margin: 0.5rem 0; font-size: 0.7rem; font-family: sans-serif; text-transform: uppercase; color: #666; } .orgcolab { position: absolute; top: 725px; height: 7rem; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: min-content 1fr; grid-gap: 0.25rem; justify-content: start; align-items: center; width: 100%; } .org { grid-row: 1/2; grid-column: 1/2; font-size: 0.8rem; text-transform: uppercase; } .colab { font-size: 0.8rem; grid-row: 1/2; grid-column: 2/3; text-transform: uppercase; } .orgmixed { grid-row: 2/3; grid-column: 1/2; display: flex; } .colabmixed { grid-row: 2/3; grid-column: 2/3; display: flex; } </style>