holakit/packages/core/.stencil/optimizeCss_8lpqool5aixip2hfr1tw.log

Yet another design-driven UI component set.

:host {
  --hola-card-padding: 2.5rem;
  --hola-card-gap: 2rem
}

@media (max-width: 700px) {

:host {
    --hola-card-padding: 1.6rem;
    --hola-card-gap: 2.5vw /* (100vw - 95vw) / 2 */
}
  }

:host {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5rem;
  padding: var(--hola-card-padding);
  background: #fff;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
  color: var(--hola-text-dark-color);
  background-size: cover;
  background-position: center;
}

::slotted(*) {
  text-decoration: none;
  color: inherit;
}

::slotted(p) {
  line-height: 22px;
}

::slotted(.title) {
  margin-bottom: 2rem;
  margin-bottom: var(--hola-element-gap);
}

:host([with-image]) ::slotted(img:first-child) {
  margin: calc(0rem - 2.5rem)
    calc(0rem - 2.5rem) 2rem
    calc(0rem - 2.5rem);
  margin: calc(0rem - var(--hola-card-padding))
    calc(0rem - var(--hola-card-padding)) 2rem
    calc(0rem - var(--hola-card-padding));
  width: calc(100% + 2 * 2.5rem);
  width: calc(100% + 2 * var(--hola-card-padding));
}

:host([full-image]) ::slotted(img, hola-image) {
  margin: calc(0rem - 2.5rem);
  margin: calc(0rem - var(--hola-card-padding));
  width: calc(100% + 2 * 2.5rem);
  width: calc(100% + 2 * var(--hola-card-padding));
}