Multicolunas personalizadas com visualizador de imagens

 { { 'custom-multicolumn.css' | URL_do_asset | folha_de_estilo } }
 { %- estilo -% } 
. seção - { { seção. id } } - preenchimento {
 preenchimento - topo : { { seção. configurações . preenchimento_top | vezes : 0,75 | redondo : 0 } } px ; 
preenchimento - inferior : { { seção. configurações . preenchimento_bottom | vezes : 0,75 | redondo : 0 } } px ;
 }
 @media screen e ( largura mínima : 750px ) { 
. seção - { { seção. id } } - preenchimento {
 preenchimento - topo : { { seção. configurações . padding_top } } px ; 
preenchimento - inferior : { { seção. configurações . padding_bottom } } px ;
 }
 }
 { %- estilo final -% }
 { %- líquido
 atribuir colunas_mobile_int = seção. configurações . colunas_mobile | mais : 0 
atribuir show_mobile_slider = falso
 se seção. configurações . swipe_on_mobile e seção. blocos . tamanho > colunas_mobile_int
 atribuir show_mobile_slider = verdadeiro
 fim se
 -% }
 < div
 style = "--button-color: {{ section.settings.button_color }} ; --button-background: {{ section.settings.button_background }} " 
class = "custom-multicolumn color- {{ section.settings.color_scheme }} gradiente {% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background- {{ section.settings.background_style }} {% endunless %} {% if section.settings.title == blank %} sem título {% endif %} "
 > 
< div class = "seção de largura de página- {{ section.id }} -padding isolar" >
 { %- a menos que seção. configurações . título == em branco -% }
 < div class = "title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin" > 
< h2 class = "title inline-richtext {{ section.settings.heading_size }} " >
 { { seção. configurações . título } }
 </ h2 > 
{ % -se seção. configurações . button_label != em branco e show_mobile_slider -% }
 <a href = "{{section.settings.button_link }}" class = "link sublinhado-link grande-ocultar" > _ {{ section.settings.button_link }} _ _ _ _ 
{ { - seção. configurações . rótulo_botão | escapar - } }
 </a> _
 { %- fim se -% }
 </div> _ _
 { %- sem fim -% } 
< div class = "slider-mobile-gutter" >
 < ul
 class = "custom-multicolumn-list contains-content-container grid grid-- {{ section.settings.columns_mobile }} -col-tablet-down grid-- {{ section.settings.columns_desktop }} -col-desktop {% if show_mobile_slider %} controle deslizante - grade móvel - peek {% endif %} "
 id = "Slider- {{ section.id }} " 
função = "lista"
 >
 { %- líquido
 atribuir proporção_mais alta = 0
 para bloco na seção. blocos
 se bloquear. configurações . imagem . proporção_de_aspecto > proporção_mais alta
 atribuir proporção_mais alta = bloco. configurações . imagem . proporção da tela
 fim se
 fim para 
-% }
 { %- para bloco na seção. blocos -% }
 { %- atribuir coluna_vazia = '' -% }
 { % -se bloco. configurações . imagem == em branco 
e bloquear. configurações . título == em branco
 e bloquear. configurações . texto == em branco
 e bloquear. configurações . link_label == em branco
 -% }
 { %- atribuir coluna_vazia = ' lista-de-colunas-personalizadas__item--empty' -% } 
{ %- fim se -% }
 < li
 id = "Slide- {{ section.id }} - {{ forloop.index }} "
 class = "custom-multicolumn-list__item grid__item {% if section.settings.swipe_on_mobile %} slider__slide {% endif %} {% if section.settings.column_alignment == 'center' %} center {% endif %} {{ empty_column }} " 
{ { bloquear. shopify_atributos } }
 >
 < div class = "container de conteúdo de cartão multicoluna personalizado" >
 < imagem - visualizador class="image-viewer--box" > 
{ % -se bloco. configurações . imagem ! = em branco -% }
 { % se seção. configurações . image_ratio == 'adaptar' ou seção. configurações . proporção_da_imagem == 'círculo' % } 
{ % atribuir imagem_espaçada = true % }
 { % fim se % } 
< div class = "custom-multicolumn-card__image-wrapper custom-multicolumn-card__image-wrapper-- {{ section.settings.image_width }} -width {% if section.settings.image_width != 'full' or spaced_image %} custom -multicolumn-card-spacing {% endif %} " >
 < rótulo
 for = "multimídia- {{ block.id }} " 
class = "media media--mídia transparente-- {{ section.settings.image_ratio }} "
 { % se seção. configurações . image_ratio == 'adaptar' % }
 style = "preenchimento inferior: {{ 1 | divided_by: highest_ratio | times: 100 }} %;" 
{ % fim se % }
 >
 { %- líquido
 atribuir número_de_colunas = seção. configurações . colunas_desktop
 atribuir number_of_columns_mobile = seção. configurações . colunas_mobile 
atribuir grid_space_desktop = number_of_columns | menos : 1 | vezes : configurações. espaçamento_grid_horizontal | mais : 100 | acrescentar : 'px' 
atribuir grid_space_tablet = number_of_columns_mobile | menos : 1 | vezes : configurações. espaçamento_grid_horizontal | mais : 100 | acrescentar : 'px' 
atribuir grid_space_mobile = number_of_columns_mobile | menos : 1 | vezes : configurações. espaçamento_grid_horizontal | dividido_por : 2 | mais : 30 | acrescentar : 'px' 
se seção. configurações . largura_da_imagem == 'metade'
 atribuir largura_da_imagem = 0,5
 seção Elif. configurações . image_width == 'terceiro'
 atribuir largura_da_imagem = 0,33
 outro
 atribuir largura_imagem = 1
 fim se 
-% }
 { % tamanhos de captura % } 
( largura mínima : { { configurações.largura_da_página } } px ) calc ( ( { { configurações.largura_da_página } } px - { { grid_space_desktop } } ) * { { largura_da_imagem } } / { { número_de_colunas } } ) , 
( largura mínima : 990px ) calc ( ( 100vw - { { grid_space_desktop } } ) * { { image_width } } / { { number_of_columns } } ) , 
( largura mínima : 750px ) calc ( ( 100vw - { { grid_space_tablet } } ) * { { image_width } } / { { number_of_columns_mobile } } ) , 
calc ( ( 100vw - { { grid_space_mobile } } ) * { { image_width } } / { { number_of_columns_mobile } } )
 { % captura final % } 
{ {
 bloquear. configurações . imagem
 | URL_da_imagem : largura : 3200
 | imagem_tag :
 carregando : 'preguiçoso' ,
 larguras : '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200' , 
tamanhos : tamanhos ,
 classe : 'cartão de múltiplas colunas personalizado__image'
 } }
 </ rótulo >
 < entrada
 tipo = "rádio"
 class = "multi-imagem--entrada"
 id = "multimídia- {{ block.id }} " 
nome = "multimídia- {{ section.id }} "
 >
 { % se bloco. configurações . multi_images_links ! = em branco % }
 < div class = "multimídia--container" > 
<div> _ _
 < span data - input = "multi-media- {{ block.id }} " > ✕ </ span > 
{ % atribuir multi_images = bloco. configurações . multi_imagens_links | tira_html | dividir : ',' % }
 < botão
 nome = "anterior"
 { { multi_imagens. tamanho } } 
{ % se multi_images. tamanho < 2 % }
 desabilitado
 { % fim se % }
 >
 ❮
 </ botão >
 <ul> _ 
{ % para image_link em multi_images % }
 < li class = "multimídia--wrapper" >
 < img src = " {{ image_link }} " >
 </ li > 
{ % fim para % }
 </ul> _
 < botão
 nome = "próximo"
 { % se multi_images. tamanho < 2 % }
 desabilitado 
{ % fim se % }
 >
 ❯
 </ botão >
 </div> _ _
 </div> _ _
 { % fim se % }
 </div> _ _ 
{ %- fim se -% }
 < div class = "custom-multicolumn-card__info" >
 { % -se bloco. configurações . título ! = em branco -% } 
< h3 class = "inline-richtext" > { { bloco. configurações . título } } </ h3 >
 { %- fim se -% } 
{ % -se bloco. configurações . texto ! = em branco -% }
 < div class = "rte" > { { bloco. configurações . texto } } </ div > 
{ %- fim se -% }
 { % -se bloco. configurações . link_label != em branco -% }
 < um
 class = "link animado-seta" 
{ % se bloco. configurações . link == em branco % }
 role = "link" aria - desativado = "true"
 { % outro % }
 href = " {{ block.settings.link }} " 
{ % fim se % }
 >
 { { - bloquear. configurações . link_label | escapar - } } 
< span class = "icon-wrap" >& nbsp ; { % render 'icon-arrow' % } </ span ></ a
 >
 { %- fim se -% }
 </div> _ _ 
</ imagem - visualizador >
 </div> _ _
 </ li >
 { %- fim para -% }
 </ul> _
 </div> _ _ 
< div class = "center {% if show_mobile_slider %} pequeno-ocultar médio-ocultar {% endif %} " >
 { % -se seção. configurações . rótulo_de_botão != em branco -% }
 < um
 class = "botão botão--primário" 
{ % se seção. configurações . button_link == em branco % }
 role = "link" aria - desativado = "true"
 { % outro % }
 href = " {{ section.settings.button_link }} " 
{ % fim se % }
 >
 { { seção. configurações . rótulo_botão | escapar } }
 </a> _
 { %- fim se -% }
 </div> _ _ 
</div> _ _
 </div> _ _
 { % esquema % }
 {
 "name" : "Visualizador de imagens multicolunas" ,
 "class" : "seção visualizador de imagens" ,
 "tag" : "seção" , 
"desativado_on" : {
 "grupos" : [ "cabeçalho" , "rodapé" ]
 } ,
 "configurações" : [
 {
 "tipo" : "inline_richtext" ,
 "id" : "título" , 
"default" : "Multicolunas" ,
 "label" : "Multicoluna"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "heading_size" ,
 "opções" : [
 { 
"valor" : "h2" ,
 "rótulo" : "Pequeno"
 } ,
 {
 "valor" : "h1" ,
 "rótulo" : "Médio"
 } ,
 { 
"valor" : "h0" ,
 "rótulo" : "Grande"
 }
 ] ,
 "padrão" : "h1" ,
 "label" : "Tamanho do título"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "largura_da_imagem" ,
 "opções" : [
 {
 "valor" : "terceiro" ,
 "label" : "Um terço da largura da coluna"
 } ,
 { 
"valor" : "metade" ,
 "label" : "Meia largura da coluna"
 } ,
 {
 "valor" : "completo" ,
 "label" : "Largura total da coluna"
 }
 ] , 
"padrão" : "completo" ,
 "label" : "Largura da imagem"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "image_ratio" ,
 "opções" : [
 { 
"valor" : "adaptar" ,
 "label" : "Adaptar à imagem"
 } ,
 {
 "valor" : "retrato" ,
 "rótulo" : "Retrato"
 } ,
 { 
"valor" : "quadrado" ,
 "rótulo" : "Quadrado"
 } ,
 {
 "valor" : "círculo" ,
 "rótulo" : "Círculo"
 }
 ] , 
"padrão" : "adaptar" ,
 "label" : "Proporção da imagem"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "colunas_desktop" ,
 "min" : 1 , 
"máximo" : 6 ,
 " passo 1 ,
 "padrão" : 3 ,
 "label" : "Número de colunas no desktop"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "coluna_alignment" ,
 "opções" : [
 {
 "valor" : "esquerda" ,
 "rótulo" : "Esquerda"
 } ,
 {
 "valor" : "centro" , 
"rótulo" : "Centro"
 }
 ] ,
 "padrão" : "esquerda" ,
 "label" : "Alinhamento da coluna"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "estilo_de_fundo" ,
 "opções" : [
 {
 "valor" : "nenhum" ,
 "rótulo" : "Nenhum"
 } ,
 {
 "valor" : "primário" , 
"label" : "Mostrar como plano de fundo da coluna"
 }
 ] ,
 "padrão" : "primário" ,
 "label" : "Fundo secundário"
 } ,
 {
 "tipo" : "texto" , 
"id" : "button_label" ,
 "default" : "Etiqueta do botão" ,
 "label" : "Etiqueta do botão de seção"
 } ,
 {
 "tipo" : "url" ,
 "id" : "botão_link" , 
"label" : "Link do botão da seção"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "esquema_cor" ,
 "opções" : [
 {
 "valor" : "acento-1" , 
"label" : "Acento 1"
 } ,
 {
 "valor" : "acento-2" ,
 "label" : "Acento 2"
 } ,
 {
 "valor" : "plano de fundo-1" , 
"rótulo" : "Plano de fundo 1"
 } ,
 {
 "valor" : "plano de fundo-2" ,
 "rótulo" : "Fundo 2"
 } ,
 {
 "valor" : "inverso" , 
"label" : "Inverso"
 }
 ] ,
 "padrão" : "plano de fundo-1" ,
 "label" : "Esquema de cores"
 } ,
 {
 "tipo" : "cor" , 
"id" : "cor_botão" ,
 "label" : "Cor do texto do botão" ,
 "padrão" : "#fff"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "botão_background" , 
"label" : "Fundo do botão" ,
 "padrão" : "#000"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Layout móvel"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "colunas_mobile" ,
 "opções" : [
 {
 "valor" : "1" ,
 "rótulo" : "1 coluna"
 } ,
 { 
"valor" : "2" ,
 "rótulo" : "2 colunas"
 }
 ] ,
 "padrão" : "1" ,
 "label" : "Número de colunas no celular"
 } ,
 { 
"tipo" : "cabeçalho" ,
 "content" : "Preenchimento de seção"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 , 
"máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" ,
 "label" : "Preenchimento superior" ,
 "padrão" : 36
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" , 
"label" : "Preenchimento inferior" ,
 "padrão" : 36
 }
 ] ,
 "blocos" : [
 {
 "tipo" : "coluna" ,
 "nome" : "Coluna" , 
"configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "imagem" ,
 "rótulo" : "Imagem"
 } ,
 {
 "tipo" : "inline_richtext" , 
"id" : "título" ,
 "default" : "Coluna" ,
 "rótulo" : "Título"
 } ,
 {
 "type" : "richtext" ,
 "id" : "texto" , 
"default" : "<p>Combine o texto com uma imagem para focar no produto, coleção ou postagem do blog escolhido. Adicione detalhes sobre disponibilidade, estilo ou até mesmo forneça uma avaliação.</p>" ,
 "rótulo" : "Descrição"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "link_label" , 
"label" : "Rótulo do link"
 } ,
 {
 "tipo" : "url" ,
 "id" : "link" ,
 "rótulo" : "Link"
 } ,
 { 
"type" : "richtext" ,
 "id" : "multi_images_links" ,
 "default" : "<p>https://cdn.shopify.com/s/files/1/0578/8903/0244/files/made4uo.gif?v=1681747466,https://cdn.shopify.com/ s/files/1/0578/8903/0244/files/made4uo.gif?v=1681747466</p>" ,
 "label" : "Links de imagens dos arquivos do seu site" , 
"info" : "Separe os links com vírgula. Obtenha os links em [Admin > Conteúdo > Arquivos](https:\/\/admin.shopify.com)"
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Visualizador de imagens multicolunas" ,
 "blocos" : [
 { 
"tipo" : "coluna"
 } ,
 {
 "tipo" : "coluna"
 } ,
 {
 "tipo" : "coluna"
 }
 ]
 }
 ]
 } 
{ % termina o esquema % }

 . abrir - imagem - visualizador principal {
 índice z : 5 ;
 }
 . abrir - imagem - visualizador 
. seção shopify : não ( . visualizador de imagem : tem ( visualizador de imagem. visualizador de imagem - aberto ) )
 > * {
 índice z : -99999 ;
 posição : relativa ; 
}
 . multimídia -- contêiner {
 posição : fixa ;
 largura : 100 %;
 altura : 100 %;
 plano de fundo : rgba ( 0 , 0 , 0 , 0,9 ) ; 
índice z : 10 ;
 topo : 0 ;
 esquerda : 0 ;
 Mostrar nenhum ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 } 
. multi - imagem - entrada : marcada + . multimídia -- contêiner {
 exibição : flexível ;
 }
 corpo. abrir - imagem - visualizador {
 estouro : oculto ;
 }
 . multimídia -- container ul { 
exibição : flexível ;
 largura : 100 %;
 altura : 100 %;
 estourar : rolar ;
 flex - direction : linha ;
 -ms - overflow - style : auto ;
 largura da barra de rolagem : auto ; 
preenchimento - inline - start : 0 ;
 margem - inline - start : 0 ;
 preenchimento - esquerda : 0 ;
 }
 . multimídia -- container ul ::- webkit - barra de rolagem {
 altura : 0,4rem ; 
largura : 0,4rem ;
 Mostrar nenhum ;
 }
 . multimídia -- container span {
 posição : absoluta ;
 superior : 5rem ;
 direita : 5rem ;
 largura : 50px ;
 altura : 50px ;
 exibição : flexível ; 
justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 cor : var ( -botão - fundo ) ;
 tamanho da fonte : 40px ;
 }
 imagem - entrada do visualizador {
 Mostrar nenhum ;
 } 
. multimídia - botão de contêiner {
 largura : 50px ;
 altura : 50px ;
 margem : 1rem ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 borda : nenhuma ; 
box - shadow : nenhum ;
 cursor : ponteiro ;
 }
 . botão multimídia -- container : desabilitado {
 cursor : não permitido ;
 visibilidade : oculta ;
 }
 . multimídia - botão de contêiner { 
cor : var ( -cor do botão ) ;
 plano de fundo : var ( -botão - fundo ) ;
 }
 . botão multimídia -- container : hover {
 plano de fundo : #fffc;
 } 
. multimídia -- wrapper {
 largura : 100 %;
 altura : 100 %;
 exibição : bloco ;
 estouro : oculto ;
 margem : automática ;
 flex - encolher : 0 ; 
scroll - snap - align : start ;
 }
 . multimídia -- wrapper img {
 largura : 100 %;
 altura : automático ;
 largura máxima : 1000px ;
 altura máxima : 90vh ;
 ajuste de objeto : contém ; 
exibição : bloco ;
 margem : automática ;
 }
 . multimídia -- container div {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 largura : 100 %;
 lacuna : 1rem ; 
}
 . personalizado - multicolunas. título {
 margem : 0 ;
 }
 . personalizado - multicolunas. sem título . título {
 Mostrar nenhum ;
 } 
. personalizado - multicolunas. título - wrapper - com - link {
 margem - topo : 0 ;
 }
 @media screen e ( largura máxima : 749px ) { 
. personalizado - multicolunas. título - wrapper - com - link {
 margem inferior : 3rem ;
 }
 . personalizado - multicolunas. largura da página {
 preenchimento - esquerda : 0 ; 
preenchimento - direita : 0 ;
 }
 }
 . custom - multicolumn - card__image - wrapper -- terceira - largura {
 largura : 33 %;
 } 
. custom - multicolumn - card__image - wrapper -- meia largura {
 largura : 50 %;
 }
 . personalizado - multicolunas - list__item. Centro
 . custom - multicolumn - card__image - wrapper : não ( 
. custom - multicolumn - card__image - wrapper -- largura total
 ) ,
 . custom - multicolumn - list__item : somente - filho {
 margem - esquerda : automático ;
 margem - direita : automático ;
 } 
. personalizado - multicolunas. botão {
 margem - topo : 1,5rem ;
 }
 @media screen e ( largura mínima : 750px ) {
 . personalizado - multicolunas. botão {
 margem - topo : 4rem ;
 }
 } 
. personalizado - multicolunas - lista {
 margem - topo : 0 ;
 margem - inferior : 0 ;
 preenchimento : 0 ;
 }
 . custom - multicolumn - list__item : somente - filho { 
largura máxima : 72rem ;
 }
 . personalizado - multicolunas - list__item -- vazio {
 Mostrar nenhum ;
 }
 . custom - multicolumn : not ( .background - none ) . personalizado - multicolunas - cartão { 
plano de fundo : rgb ( var ( -color - background ) ) ;
 altura : 100 %;
 }
 . personalizado - multicolunas. plano de fundo - primário. personalizado - multicolunas - cartão { 
plano de fundo : rgb ( var ( -color - fundo ) )
 Gradiente linear (
 rgba ( var ( -- cor de primeiro plano ) , 0,04 ) , 
rgba ( var ( -color - foreground ) , 0,04 )
 ) ;
 }
 . personalizado - multicolunas - lista h3 { 
altura da linha : calc ( 1 + 0.5 / max ( 1 , var ( -font - heading - scale ) ) ) ;
 }
 . personalizado - multicolunas - lista h3 , 
. personalizado - multicolunas - lista p {
 margem : 0 ;
 }
 . personalizado - multicolunas - cartão - espaçamento {
 preenchimento - topo : 2,5rem ;
 margem - esquerda : 2,5rem ;
 margem - direita : 2,5rem ;
 } 
. custom - multicolumn - card__info > : nth - child ( 2 ) {
 margem - topo : 1rem ;
 }
 . personalizado - multicolunas - list__item. Centro . mídia - adaptar , 
. custom - multicolumn - list__item . mídia - adaptar. personalizado - multicolunas - cartão__imagem {
 largura : automático ;
 }
 . personalizado - multicolunas - list__item. Centro . mídia -- adaptar img {
 esquerda : 50 %; 
transformar : traduzirX ( -50 % ) ;
 }
 @media screen e ( largura máxima : 749px ) {
 . personalizado - multicolunas - lista {
 margem : 0 ;
 largura : 100 %;
 } 
. custom - multicolumn - list : not ( .slider ) {
 preenchimento - esquerda : 1,5rem ;
 preenchimento - direita : 1,5rem ;
 }
 }
 @media screen e ( largura mínima : 750px ) { 
. lista personalizada - multicolunas . controle deslizante ,
 . lista personalizada - multicolunas . grade -- 4 - coluna - área de trabalho {
 preenchimento : 0 ;
 }
 . personalizado - multicolunas - list__item , 
. grade - 4 - col - desktop. personalizado - multicolunas - list__item {
 preenchimento - inferior : 0 ;
 } 
. plano de fundo - nenhum. grade - 2 - col - tablet. personalizado - multicolunas - list__item {
 margem - topo : 4rem ;
 }
 }
 . plano de fundo - nenhum. personalizado - multicolunas - cartão - espaçamento { 
preenchimento : 0 ;
 margem : 0 ;
 }
 . personalizado - multicolunas - card__info {
 preenchimento : 2,5rem ;
 }
 . plano de fundo - nenhum. personalizado - multicolunas - card__info { 
preenchimento - topo : 0 ;
 preenchimento - esquerda : 0 ;
 preenchimento - direita : 0 ;
 }
 . plano de fundo - nenhum. controle deslizante . personalizado - multicolunas - card__info {
 preenchimento - inferior : 0 ; 
}
 . plano de fundo - nenhum
 . personalizado - multicolunas - cartão__imagem - wrapper
 + . personalizado - multicolunas - card__info {
 preenchimento - topo : 2,5rem ;
 } 
. plano de fundo - nenhum. controle deslizante . personalizado - multicolunas - card__info {
 preenchimento - esquerda : 0,5rem ;
 }
 . plano de fundo - nenhum
 . controle deslizante
 . personalizado - multicolunas - cartão__imagem - wrapper 
+ . personalizado - multicolunas - card__info {
 preenchimento - esquerda : 1,5rem ;
 }
 . plano de fundo - nenhum
 . lista personalizada de múltiplas colunas : não ( .slider )
 . Centro
 . personalizado - multicolunas - card__info { 
preenchimento - esquerda : 2,5rem ;
 preenchimento - direita : 2,5rem ;
 }
 @media screen e ( largura máxima : 749px ) {
 . plano de fundo - nenhum. controle deslizante . personalizado - multicolunas - card__info {
 preenchimento - inferior : 1rem ;
 } 
. personalizado - multicolunas. plano de fundo - nenhum. controle deslizante . controle deslizante -- celular {
 margem inferior : 0rem ;
 }
 }
 @media screen e ( largura mínima : 750px ) { 
. plano de fundo - nenhum. custom - multicolumn - card__image - wrapper {
 margem - esquerda : 1,5rem ;
 margem - direita : 1,5rem ;
 } 
. plano de fundo - nenhum. lista personalizada de múltiplas colunas . personalizado - multicolunas - card__info ,
 . plano de fundo - nenhum
 . lista personalizada de múltiplas colunas : não ( .slider )
 . Centro 
. personalizado - multicolunas - card__info {
 preenchimento - esquerda : 1,5rem ;
 preenchimento - direita : 1,5rem ;
 }
 }
 . personalizado - multicolunas - cartão {
 posição : relativa ;
 dimensionamento da caixa : caixa de borda ;
 } 
. personalizado - multicolunas - cartão
 > . custom - multicolumn - card__image - wrapper -- largura total : não (
 . personalizado - multicolunas - cartão - espaçamento
 ) {
 borda - superior - esquerda - raio : calc ( 
var ( -caixas de texto - raio ) -var ( -caixas de texto - largura da borda )
 ) ;
 borda - superior - direita - raio : calc ( 
var ( -caixas de texto - raio ) -var ( -caixas de texto - largura da borda )
 ) ;
 estouro : oculto ;
 } 
. personalizado - multicolunas. plano de fundo - nenhum. personalizado - multicolunas - cartão {
 raio da borda : 0 ;
 }
 . custom - multicolumn - card__info . link {
 decoração de texto : nenhuma ; 
tamanho da fonte : herdar ;
 margem - topo : 1,5rem ;
 }
 . custom - multicolumn - card__info . ícone - embrulhar {
 margem - esquerda : 0,8rem ;
 espaço em branco : nowrap ;
 } 
@media screen e ( largura mínima : 990px ) {
 . personalizado - multicolunas - list__item -- vazio {
 display : item de lista ;
 }
 }

 classe ImageViewer estende HTMLElement { 
construtor ( ) {
 super ( ) ;
 esse . controle deslizante = isto . querySelector ( "ul" ) ; 
esse . slideItems = isto . querySelectorAll ( "li" ) ;
 esse . botões = isto . querySelectorAll ( "botão" ) ; 
esse . closeSpan = isto . querySelector ( "span" ) ;
 se ( isto . closeSpan ) 
esse . fecharSpan . addEventListener ( " clique " , isto.closeModal.bind ( este ) ) ; 
esse . entradas = isto . querySelectorAll ( "entrada" ) ;
 esse . entradas . forEach ( ( e ) => 
e. addEventListener ( "clique" , isto . inputOpen . bind ( este ) )
 ) ;
 esse . botões . forEach ( ( e ) => 
e. addEventListener ( " clique " , isto.botãoClicado.ligar ( este ) )
 ) ;
 if ( este . controle deslizante ! = nulo ) { 
const e = novo ResizeObserver ( ( e ) => this.init ( ) ) ;
 e. observe ( este.slider ) ; _ 
esse . controle deslizante . addEventListener ( " rolar " , isto.atualizar.ligar ( este ) ) ;
 }
 }
 iniciar ( ) { 
esse . slideItems . clienteLargura = isto . slideItems . largura do cliente ;
 }
 atualizar ( ) {
 const e = 
Matemática. round ( this.slider.scrollLeft / this.slideItems [ 0 ] .clientWidth ) + 1 ; _ _ _
 const t = isto . slideItems . comprimento ; 
t == e
 ? ( este . querySelector ( 'botão[nome="próximo"]' ) . desativado = verdadeiro ) 
: ( este . querySelector ( 'botão[nome="próximo"]' ) . desativado = falso ) ;
 e == 1 
? ( este . querySelector ( 'botão[nome="anterior"]' ) . desativado = verdadeiro )
 : ( este.querySelector ( 'botão[nome="anterior"]' ) . desativado = falso ) ; 
}
 entradaAberta ( e ) {
 const t = e. alvo atual ;
 e ;
 t. verificado == verdadeiro
 ? documento. corpo . lista de classes . add ( "visualizador de imagens abertas" ) 
: documento. corpo . lista de classes . remover ( "visualizador de imagens abertas" ) ;
 esse . lista de classes . add ( "visualizador de imagem-aberto" ) ;
 }
 fecharModal ( e ) { 
documento. corpo . lista de classes . remover ( "visualizador de imagens abertas" ) ;
 const t = e. atualTarget . conjunto de dados . entrada ;
 consts = isto . querySelector ( ` #${t}`);
 S. verificado = falso ; 
esse . lista de classes . remover ( "visualizador de imagem-aberto" ) ;
 }
 botãoClicado ( e ) {
 const t =
 e. atualTarget . nome === "próximo" 
? esse . controle deslizante . scrollLeft + this . slideItems [ 0 ] . largura do cliente
 : esse . controle deslizante . scrollLeft - isto . slideItems [ 0 ] . largura do cliente ; 
esse . controle deslizante . scrollTo ( { esquerda : t } ) ;
 }
 }
 elementos personalizados. define ( "visualizador de imagens" , ImageViewer ) ;