Clases CSS de uso general

El CSS mostrado es únicamente con fines ilustrativos. No hay que introducirlo, ya forma parte del tema principal. Las variables mostradas pueden ser personalziadas en en cualquier tema hijo.

w-100

.w-100 {
  width: 100%;
  > img {
    width: 100%;
  }
}

Aplica un 100% de ancho al elemento. Si se aplica en un bloque de imagen también se lo aplica al elemento img interior.

h-100

.h-100 {
  height: 100%;
}

Aplica un 100% de alto al elemento.

microbio-circle-icon

.microbio-circle-icon {
  --_padding: 2rem;
  aspect-ratio: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: var(--_padding);
}

Aplica un círculo con un padding de 2rem al elemento. El color de fondo debería aplicarse al propio elemento.

micro-banner-padding

.micro-banner-padding {
  --_y-padding: 80px;
  --_x-padding: 120px;
  padding: var(--_y-padding) var(--_x-padding);
  @media (max-width: 900px) {
    --_y-padding: 40px;
    --_x-padding: 24px;
  }
}

Unos padding rápidos para personalizar cards.