@bi-digital/css 0.2.12 → 0.2.14

package/dist/components/avatar.css

@@ -0,0 +1,50 @@
+.bi-avatar {
+  --bic-avatar-background-color: var(--bi-primary-10);
+  --bic-avatar-color: var(--bi-primary-90);
+  --bic-avatar-size: var(--bi-scale-24x);
+  --bic-avatar-font-size: 1.75rem;
+  border-radius: var(--bi-radius-full);
+  background-color: var(--bic-avatar-background-color);
+  color: var(--bic-avatar-color);
+  width: var(--bic-avatar-size);
+  height: var(--bic-avatar-size);
+  font-size: var(--bic-avatar-font-size);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  font-family: museo-sans, Arial, sans-serif;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  display: flex;
+  overflow: hidden;
+}
+
+.bi-avatar[data-color="info"] {
+  --bic-avatar-background-color: var(--bi-info-10);
+  --bic-avatar-color: var(--bi-info-90);
+}
+
+.bi-avatar[data-color="warning"] {
+  --bic-avatar-background-color: var(--bi-warning-10);
+  --bic-avatar-color: var(--bi-warning-90);
+}
+
+.bi-avatar[data-color="success"] {
+  --bic-avatar-background-color: var(--bi-success-10);
+  --bic-avatar-color: var(--bi-success-90);
+}
+
+.bi-avatar[data-color="alert"] {
+  --bic-avatar-background-color: var(--bi-alert-10);
+  --bic-avatar-color: var(--bi-alert-90);
+}
+
+.bi-avatar[data-size="small"] {
+  --bic-avatar-size: var(--bi-scale-16x);
+  --bic-avatar-font-size: 1.25rem;
+}

package/dist/components/badge.css

@@ -0,0 +1,120 @@
+.bi-badge {
+  --bic-badge-background: transparent;
+  --bic-badge-color: var(--bi-neutral-60);
+  --bic-badge-border-color: var(--bi-neutral-25);
+  --bic-badge-border-radius: var(--bi-radius-medium);
+  --bic-badge-border-width: var(--bi-stroke-thin);
+  --bic-badge-height: var(--bi-scale-6x);
+  --bic-badge-font-size: .875rem;
+  --bic-badge-line-height: 1.4;
+  --bic-badge-padding: 0 var(--bi-scale-1-5x);
+  padding: var(--bic-badge-padding);
+  border-radius: var(--bic-badge-border-radius);
+  background-color: var(--bic-badge-background);
+  color: var(--bic-badge-color);
+  font-family: museo-sans, Arial, sans-serif;
+  font-size: var(--bic-badge-font-size);
+  line-height: var(--bic-badge-line-height);
+  width: -webkit-max-content;
+  width: max-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  min-height: var(--bic-badge-height);
+  box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;
+  word-break: break-word;
+  justify-content: center;
+  align-items: center;
+  font-weight: 500;
+  display: inline-flex;
+}
+
+.bi-badge[data-dark="true"] {
+  --bic-badge-border-color: var(--bi-neutral-50);
+  --bic-badge-color: var(--bi-neutral-10);
+}
+
+.bi-badge[data-single-letter="true"]:not([data-size="xs"]) {
+  --bic-badge-border-radius: var(--bi-radius-full);
+  min-width: var(--bic-badge-height);
+}
+
+.bi-badge[data-size="xs"] {
+  --bic-badge-padding: 0 var(--bi-scale-0-50x);
+  --bic-badge-font-size: .8125rem;
+  --bic-badge-line-height: 1.15;
+  --bic-badge-border-radius: var(--bi-radius-small);
+  --bic-badge-height: var(--bi-scale-4x);
+}
+
+.bi-badge[data-size="small"] {
+  --bic-badge-padding: 0 var(--bi-scale-1x);
+  --bic-badge-font-size: .8125rem;
+  --bic-badge-line-height: 1.15;
+  --bic-badge-height: var(--bi-scale-5x);
+}
+
+.bi-badge[data-color="warning"] {
+  --bic-badge-background: var(--bi-secondary-10);
+  --bic-badge-color: var(--bi-secondary-95);
+  --bic-badge-border-color: var(--bic-badge-background);
+}
+
+.bi-badge[data-color="warning"][data-dark="true"] {
+  --bic-badge-background: var(--bi-secondary-100);
+  --bic-badge-color: var(--bi-secondary-10);
+}
+
+.bi-badge[data-color="alert"] {
+  --bic-badge-background: var(--bi-alert-10);
+  --bic-badge-color: var(--bi-alert-85);
+  --bic-badge-border-color: var(--bic-badge-background);
+}
+
+.bi-badge[data-color="alert"][data-dark="true"] {
+  --bic-badge-background: var(--bi-alert-100);
+  --bic-badge-color: var(--bi-alert-10);
+}
+
+.bi-badge[data-color="success"] {
+  --bic-badge-background: var(--bi-success-10);
+  --bic-badge-color: var(--bi-success-95);
+  --bic-badge-border-color: var(--bic-badge-background);
+}
+
+.bi-badge[data-color="success"][data-dark="true"] {
+  --bic-badge-background: var(--bi-success-100);
+  --bic-badge-color: var(--bi-success-10);
+}
+
+.bi-badge[data-color="brand"] {
+  --bic-badge-background: var(--bi-primary-10);
+  --bic-badge-color: var(--bi-primary-85);
+  --bic-badge-border-color: var(--bic-badge-background);
+}
+
+.bi-badge[data-color="brand"][data-dark="true"] {
+  --bic-badge-background: var(--bi-primary-100);
+  --bic-badge-color: var(--bi-primary-10);
+}
+
+.bi-badge[data-color="info"] {
+  --bic-badge-background: var(--bi-info-10);
+  --bic-badge-color: var(--bi-info-9);
+  --bic-badge-border-color: var(--bic-badge-background);
+}
+
+.bi-badge[data-color="info"][data-dark="true"] {
+  --bic-badge-background: var(--bi-info-100);
+  --bic-badge-color: var(--bi-info-10);
+}
+
+.bi-badge[data-color="negative"] {
+  --bic-badge-background: var(--bi-neutral-90);
+  --bic-badge-color: var(--bi-basic-white);
+  --bic-badge-border-color: var(--bic-badge-background);
+}
+
+.bi-badge[data-color="negative"][data-dark="true"] {
+  --bic-badge-background: var(--bi-neutral-100);
+  --bic-badge-color: var(--bi-neutral-10);
+}

package/dist/components/button.css

@@ -0,0 +1,175 @@
+.bi-button {
+  --bic-button-box-shadow: none;
+  --bic-button-icon-size: var(--bi-scale-6x);
+  --bic-button-padding: .625rem calc(var(--bi-scale-6x)  + var(--bi-scale-0-50x));
+  --bic-button-size: var(--bi-scale-11x);
+  --bic-button-font-size: 1rem;
+  --bic-button-line-height: 1.5;
+  --bic-button-color: 1.5rem;
+  --bic-button-background: transparent;
+  --bic-button-background-hover: transparent;
+  --bic-button-background-press: transparent;
+  font-family: museo-sans, Arial, sans-serif;
+  font-size: var(--bic-button-font-size);
+  line-height: var(--bic-button-line-height);
+  -webkit-font-smoothing: antialiased;
+  border-radius: var(--bi-radius-medium);
+  justify-content: center;
+  align-items: center;
+  gap: var(--bi-scale-1x);
+  cursor: pointer;
+  color: var(--bic-button-color);
+  background: var(--bic-button-background);
+  box-shadow: var(--bic-button-box-shadow);
+  height: -webkit-fit-content;
+  height: fit-content;
+  min-height: var(--bic-button-size);
+  min-width: var(--bic-button-size);
+  width: -webkit-fit-content;
+  width: fit-content;
+  padding: var(--bic-button-padding);
+  -webkit-text-decoration: unset;
+  text-decoration: unset;
+  text-align: inherit;
+  border: none;
+  flex-shrink: 0;
+  font-weight: 600;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.bi-button[data-stretch="true"] {
+  width: 100%;
+}
+
+.bi-button[data-active="true"] {
+  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
+}
+
+.bi-button:focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-button:focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-button[data-size="small"] {
+  --bic-button-font-size: .875rem;
+  --bic-button-line-height: 1.25rem;
+  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x)  + var(--bi-scale-0-50x));
+  --bic-button-icon-size: var(--bi-scale-4x);
+  --bic-button-size: var(--bi-scale-8x);
+}
+
+.bi-button[data-size="large"] {
+  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x)  + var(--bi-scale-0-50x));
+  --bic-button-icon-size: var(--bi-scale-8x);
+  --bic-button-size: var(--bi-scale-14x);
+}
+
+.bi-button[data-icon] {
+  width: var(--bic-button-size);
+  height: var(--bic-button-size);
+  --bic-button-font-size: var(--bic-button-icon-size);
+  padding: 0;
+}
+
+.bi-button:not([data-variant]) {
+  --bic-button-color: var(--bi-basic-white);
+  --bic-button-background: var(--bi-primary-50);
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
+  --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
+}
+
+.bi-button[data-variant="filled"] {
+  --bic-button-color: var(--bi-basic-white);
+  --bic-button-background: var(--bi-primary-50);
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
+  --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
+}
+
+.bi-button[data-variant="outlined"] {
+  --bic-button-color: var(--bi-primary-50);
+  --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-primary-50) inset;
+  --bic-button-background-hover: var(--bi-states-hover-dark);
+  --bic-button-background-press: var(--bi-states-press-dark);
+}
+
+.bi-button[data-variant="outlined"][data-dark="true"] {
+  --bic-button-color: var(--bi-basic-white);
+  --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-basic-white) inset;
+  --bic-button-background-hover: var(--bi-states-hover-light);
+  --bic-button-background-press: var(--bi-states-press-light);
+}
+
+.bi-button[data-variant="text"] {
+  --bic-button-color: var(--bi-neutral-90);
+  --bic-button-background-hover: var(--bi-states-hover-dark);
+  --bic-button-background-press: var(--bi-states-press-dark);
+}
+
+.bi-button[data-variant="text"][data-dark="true"] {
+  --bic-button-color: var(--bi-basic-white);
+  --bic-button-background-hover: var(--bi-states-hover-light);
+  --bic-button-background-press: var(--bi-states-press-light);
+}
+
+.bi-button[data-variant="flat"] {
+  --bic-button-color: var(--bi-primary-90);
+  --bic-button-background: var(--bi-primary-5);
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
+}
+
+.bi-button[data-variant="flat"][data-dark="true"] {
+  --bic-button-color: var(--bi-basic-white);
+  --bic-button-background: #ffffff1a;
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
+    background: var(--bic-button-background-hover);
+  }
+}
+
+.bi-button[aria-busy="true"] {
+  cursor: progress;
+}
+
+.bi-button:-webkit-any(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+}
+
+.bi-button:-webkit-any(:disabled, [aria-disabled="true"])[aria-busy="true"] {
+  cursor: progress;
+}
+
+.bi-button:is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+}
+
+.bi-button:is(:disabled, [aria-disabled="true"])[aria-busy="true"] {
+  cursor: progress;
+}
+
+.bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
+  background: var(--bic-button-background-press);
+}
+
+.bi-button .bi-button--start-icon {
+  display: inherit;
+  font-size: var(--bic-button-icon-size);
+}
+
+.bi-button .bi-button--end-icon {
+  display: inherit;
+  font-size: var(--bic-button-icon-size);
+}

package/dist/components/card.css

@@ -0,0 +1,343 @@
+.bi-card {
+  --bic-card-border-width: 1px;
+  --bic-card-border-radius: var(--bi-radius-medium);
+  --bic-card-child-border-radius: calc(var(--bic-card-border-radius)  - var(--bic-card-border-width));
+  --bic-card-background-color: var(--bi-basic-white);
+  --bic-card-color: var(--bi-neutral-95);
+  --bic-card-border-color: var(--bi-neutral-15);
+  --bic-card-header-title-color: var(--bi-neutral-95);
+  --bic-card-header-bold-color: var(--bi-primary-60);
+  --bic-card-header-label-color: var(--bi-neutral-50);
+  --bic-card-actions-background-color: var(--bi-neutral-10);
+  --bic-card-actions-icon-color: var(--bi-primary-50);
+  --bic-card-actions-flex-direction: column;
+  --bic-card-content-padding: var(--bi-scale-4x);
+  --bic-card-content-color: var(--bi-neutral-50);
+  --bic-card-media-width: 100%;
+}
+
+.bi-card[data-dark="true"] {
+  --bic-card-background-color: var(--bi-neutral-95);
+  --bic-card-color: var(--bi-neutral-5);
+  --bic-card-border-color: var(--bi-neutral-70);
+  --bic-card-header-title-color: var(--bi-neutral-5);
+  --bic-card-header-bold-color: var(--bi-primary-20);
+  --bic-card-header-label-color: var(--bi-neutral-30);
+  --bic-card-actions-background-color: var(--bi-neutral-75);
+  --bic-card-actions-icon-color: var(--bi-primary-20);
+  --bic-card-content-color: var(--bi-neutral-30);
+}
+
+.bi-card {
+  border: var(--bic-card-border-width) solid var(--bic-card-border-color);
+  border-radius: var(--bic-card-border-radius);
+  background-color: var(--bic-card-background-color);
+  width: 100%;
+  color: var(--bic-card-color);
+  flex-direction: row;
+  display: flex;
+}
+
+.bi-card[data-orientation="horizontal"] > div:first-child {
+  border-top-left-radius: var(--bic-card-child-border-radius);
+  border-bottom-left-radius: var(--bic-card-child-border-radius);
+}
+
+.bi-card[data-orientation="horizontal"] > div:last-child {
+  border-top-right-radius: var(--bic-card-child-border-radius);
+  border-bottom-right-radius: var(--bic-card-child-border-radius);
+}
+
+.bi-card[data-orientation="horizontal"] {
+  --bic-card-media-width: 252px;
+}
+
+@media not (min-width: 1024px) {
+  .bi-card[data-orientation="horizontal"] {
+    --bic-card-media-width: 220px;
+  }
+}
+
+@media not (min-width: 768px) {
+  .bi-card[data-orientation="horizontal"] {
+    --bic-card-media-width: 135px;
+  }
+}
+
+.bi-card[data-orientation="vertical"] {
+  --bic-card-actions-flex-direction: row;
+  flex-direction: column;
+}
+
+.bi-card[data-orientation="vertical"] > div:first-child {
+  border-top-left-radius: var(--bic-card-child-border-radius);
+  border-top-right-radius: var(--bic-card-child-border-radius);
+}
+
+.bi-card[data-orientation="vertical"] > div:last-child {
+  border-bottom-left-radius: var(--bic-card-child-border-radius);
+  border-bottom-right-radius: var(--bic-card-child-border-radius);
+}
+
+.bi-card[data-orientation="vertical"] .bi-card--actions {
+  width: 100%;
+}
+
+.bi-card[data-color="info"] {
+  --bic-card-background-color: var(--bi-info-5);
+  --bic-card-color: var(--bi-info-90);
+  --bic-card-border-color: var(--bi-info-15);
+  --bic-card-header-title-color: var(--bi-info-90);
+  --bic-card-header-bold-color: var(--bi-info-90);
+  --bic-card-header-label-color: var(--bi-info-90);
+}
+
+.bi-card[data-color="warning"] {
+  --bic-card-background-color: var(--bi-warning-10);
+  --bic-card-color: var(--bi-warning-90);
+  --bic-card-border-color: var(--bi-warning-15);
+  --bic-card-header-title-color: var(--bi-warning-90);
+  --bic-card-header-bold-color: var(--bi-warning-90);
+  --bic-card-header-label-color: var(--bi-warning-90);
+}
+
+.bi-card[data-error="true"] {
+  box-shadow: 0 0 0 2px var(--bi-alert-50);
+  --bic-card-border-color: transparent;
+}
+
+.bi-card .bi-card--content {
+  padding: var(--bic-card-content-padding);
+  gap: var(--bi-scale-4x);
+  flex-direction: column;
+  flex: auto;
+  display: flex;
+}
+
+.bi-card .bi-card--content:-webkit-any(a, button) {
+  cursor: pointer;
+  background: none;
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card .bi-card--content:-webkit-any(a, button):disabled {
+  cursor: not-allowed;
+}
+
+.bi-card .bi-card--content:is(a, button) {
+  cursor: pointer;
+  background: none;
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card .bi-card--content:is(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card .bi-card--content:is(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card .bi-card--content:is(a, button):disabled {
+  cursor: not-allowed;
+}
+
+.bi-card .bi-card--content > p {
+  color: var(--bic-card-content-color);
+  white-space: break-spaces;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--content {
+    --bic-card-content-padding: var(--bi-scale-3x);
+    gap: var(--bi-scale-3x);
+  }
+}
+
+.bi-card .bi-card--actions {
+  flex-direction: var(--bic-card-actions-flex-direction, column);
+  justify-content: center;
+  gap: var(--bi-scale-1x);
+  width: var(--bi-scale-14x);
+  background-color: var(--bic-card-actions-background-color);
+  display: flex;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--actions {
+    width: var(--bi-scale-11x);
+  }
+}
+
+.bi-card .bi-card--actions .bi-card--action {
+  --bic-button-font-size: var(--bi-icon-medium);
+  --bic-button-color: var(--bic-card-actions-icon-color);
+  --bic-button-size: var(--bi-scale-14x);
+  height: 100%;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--actions .bi-card--action {
+    --bic-button-size: var(--bi-scale-11x);
+  }
+}
+
+.bi-card .bi-card--header {
+  gap: var(--bi-scale-0-50x);
+  word-wrap: break-word;
+  word-break: break-word;
+  flex-direction: column;
+  width: 100%;
+  font-family: museo-sans, Arial, sans-serif;
+  line-height: 1.5;
+  display: flex;
+}
+
+.bi-card .bi-card--header .bi-card--header-label {
+  color: var(--bic-card-header-label-color);
+  margin: 0;
+  font-size: .875rem;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--header .bi-card--header-label {
+    font-size: .8125rem;
+  }
+}
+
+.bi-card .bi-card--header .bi-card--header-label .bi-card--header-bold {
+  color: var(--bic-card-header-bold-color);
+  font-weight: 600;
+}
+
+.bi-card .bi-card--header .bi-card--header-label .bi-card--header-dot {
+  width: var(--bi-scale-0-50x);
+  height: var(--bi-scale-0-50x);
+  margin: auto var(--bi-scale-1x);
+  vertical-align: middle;
+  background-color: currentColor;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.bi-card .bi-card--header .bi-card--header-title {
+  color: var(--bic-card-header-title-color);
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--header .bi-card--header-title {
+    font-size: 1rem;
+  }
+}
+
+.bi-card .bi-card--media {
+  width: var(--bic-card-media-width);
+  min-width: var(--bic-card-media-width);
+  display: block;
+  position: relative;
+}
+
+.bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
+  border-radius: inherit;
+  object-fit: cover;
+  aspect-ratio: 3 / 2;
+  width: 100%;
+  display: block;
+}
+
+.bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
+  border-radius: inherit;
+  object-fit: cover;
+  aspect-ratio: 3 / 2;
+  width: 100%;
+  display: block;
+}
+
+.bi-card .bi-card--media .bi-card--media-overlay {
+  top: var(--bi-scale-4x);
+  left: var(--bi-scale-4x);
+  right: var(--bi-scale-4x);
+  flex-wrap: wrap;
+  width: -webkit-fit-content;
+  width: fit-content;
+  display: flex;
+  position: absolute;
+}
+
+.bi-card .bi-card--date {
+  width: 51px;
+  height: 46px;
+  padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
+  border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
+  background: var(--bic-card-background-color);
+  box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
+  color: var(--bic-card-header-title-color);
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  font-family: museo-sans, Arial, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.3;
+  display: flex;
+}
+
+.bi-card .bi-card--date span {
+  color: var(--bic-card-header-bold-color);
+  font-size: .8125rem;
+  line-height: 1.15;
+}