/** Dummy */
/*
 * Variables
 */
:root {
  --card-padding: 20px;
  --card-height: 150px;
  --card-skeleton: linear-gradient(white var(--card-height), transparent 0);
  --avatar-size: 90%;
  --avatar-position: var(--card-padding) var(--card-padding);
  --avatar-skeleton: linear-gradient(#f3f3f3 var(--title-height), transparent 0);
  --title-height: 24px;
  --title-width: 60%;
  --title-position: var(--card-padding) 60px;
  --title-skeleton: linear-gradient(#f8f8f8 var(--title-height), transparent 0);
  --desc-line-height: 8px;
  --desc-line-skeleton: linear-gradient(#f3f3f3 var(--desc-line-height), transparent 0);
  --desc-line-1-width: 30%;
  --desc-line-1-position: var(--card-padding) 95px;
  --desc-line-2-width: 31%;
  --desc-line-2-position: var(--card-padding) 110px;
  --footer-height: 0px;
  --footer-position: 0 calc(var(--card-height) - var(--footer-height));
  --footer-skeleton: linear-gradient(white var(--footer-height), transparent 0);
  --blur-width: 500px;
  --blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height)); }

/*
 * Card Skeleton for Loading
 */
.dummy-card {
  width: 100%;
  height: var(--card-height); }
  .dummy-card:empty::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    box-shadow: none;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), var(--title-skeleton), var(--desc-line-skeleton), var(--desc-line-skeleton), var(--avatar-skeleton), var(--footer-skeleton), var(--card-skeleton);
    background-size: var(--blur-size), var(--title-width) var(--title-height), var(--desc-line-1-width) var(--desc-line-height), var(--desc-line-2-width) var(--desc-line-height), var(--avatar-size) var(--avatar-size), 100% var(--footer-height), 100% 100%;
    background-position: -150% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0;
    /*card*/
    background-repeat: no-repeat;
    animation: loading .9s infinite; }

@keyframes loading {
  to {
    background-position: 250% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0; 
  } 
}