.my-card {
  border-radius: 10px !important;
  border: 1px solid #e7e7e7;
  box-shadow: 10px 20px 40px 0 rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(40px);
  padding: 22px 32px;
  position: relative;

  & h3 {
    margin: 0;
  }

  .card-title-text {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 22px;

    .card-title-icon {
      font-size: 1em;
      width: 1em;
      height: 1em;
      vertical-align: middle;
      color: #999;
    }
  }

  & hr {
    margin: 0.75rem 0;
  }

  /* Stacks the title row and the subtitle, which belongs under the title rather
     than beside it in the row */
  .card-header {
    display: flex;
    flex-direction: column;
  }

  .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* The line box is pinned rather than left to the font, so the placeholder can
     be given the same one */
  .card-subtitle-text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: #999;
  }

  /* Stands in for the subtitle line: the same top margin, and padding that pads
     the 16px bone out to the 20px line box above, so the body does not move when
     the text arrives. Narrower than the title's share, as a subtitle is */
  .card-subtitle-skeleton.epag-skeleton-loader--loading {
    width: 30%;
    margin-top: 8px;
    padding: 2px 0;
  }

  /* Only while standing in for the title does the placeholder take a title's
     share of the row; once the title is in, the wrapper is no longer a box and
     the title sizes itself */
  .card-title-skeleton.epag-skeleton-loader--loading {
    width: 45%;
    flex: 0 1 auto;
  }

  /* Stands in for the rule, margins included, so the body does not move */
  .card-divider-skeleton {
    margin: 0.75rem 0;
  }

  hr {
    background-color: #999;
    height: 1px;
    border: 0;
  }

  .not-fit {
    width: auto;
  }
}