/* Folha própria do tema SHOP H2O. Carregada pela casca do System no , antes das regras do painel de aparência — o que o operador configura vence daqui. Variante escolhida por setting fica em `:where()` ou em custom property; nenhuma regra mira uma parte acima de 0-1-0. */ .campaign-mosaic { padding: 24px 0; } :where(.campaign-mosaic--compact) { padding-top: 16px; padding-bottom: 16px; } .campaign-mosaic__heading { margin: 0 0 16px; } .campaign-mosaic__eyebrow { margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; } .campaign-mosaic__title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.8rem); } .campaign-mosaic__subtitle { margin: 6px 0 0; opacity: 0.78; } .campaign-mosaic__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--campaign-gap, 16px); } .campaign-mosaic--gap-sm { --campaign-gap: 8px; } .campaign-mosaic--gap-md { --campaign-gap: 16px; } .campaign-mosaic--gap-lg { --campaign-gap: 24px; } .campaign-mosaic__card { position: relative; overflow: hidden; aspect-ratio: var(--campaign-card-ratio, 16 / 6); border-radius: var(--campaign-card-radius, 16px); background: #dcecf0; color: #fff; } .campaign-mosaic--regular { --campaign-card-ratio: 16 / 8; } .campaign-mosaic--square { --campaign-card-radius: 0; } .campaign-mosaic__link { display: block; height: 100%; color: inherit; text-decoration: none; } .campaign-mosaic__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } :where(.campaign-mosaic__card:hover) .campaign-mosaic__image { transform: scale(1.04); } .campaign-mosaic__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 35, 45, 0.04) 20%, rgba(13, 35, 45, 0.84) 100%); } .campaign-mosaic__copy { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; } .campaign-mosaic__card-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; } .campaign-mosaic__card-title { display: block; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.1; } .campaign-mosaic__text { margin: 5px 0 10px; font-size: 0.82rem; opacity: 0.92; } .campaign-mosaic__action { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 999px; font-size: 0.78rem; font-weight: 700; } @media (max-width: 767px) { .campaign-mosaic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campaign-mosaic__card { --campaign-card-ratio: 1 / 1; } .campaign-mosaic__text { display: none; } } @media (max-width: 460px) { .campaign-mosaic__grid { grid-template-columns: minmax(0, 1fr); } .campaign-mosaic__card { --campaign-card-ratio: 16 / 7; } }