.skeleton {
  background-repeat: no-repeat;
  background-image: 
    /* layer 2: avatar */
    /* #eee circle with 16px radius */
    radial-gradient(circle 16px, #eee 99%, transparent 0),
    /* layer 1: title */
    /* #eee rectangle with 40px height */
    linear-gradient(#eee 40px, transparent 0),
    /* layer 0: card bg */
    /* gray rectangle that covers whole element */
    linear-gradient(gray 420px, transparent 0);
}

.skeleton {
  background-size:
    32px 32px,  /* avatar */
    200px 40px, /* title */
    100% 100%;  /* card bg */
}

.skeleton {
  background-position:
    24px 24px,  /* avatar */
    24px 200px, /* title */
    0 0;        /* card bg */
}
.skeleton {
  /*
    define as separate properties
  */
  --card-height: 340px;
  --card-padding:24px;
  --card-skeleton: linear-gradient(gray 340px, transparent 0);

  --title-height: 32px;
  --title-width: 200px;
  --title-position: 24px 180px;
  --title-skeleton: linear-gradient(white 32px, transparent 0);

  --avatar-size: 32px;
  --avatar-position: 24px 24px;
  --avatar-skeleton: radial-gradient(
    circle 16px, 
    #eee 99%, 
    transparent 0
  );

  /* 
    now we can break the background up 
    into individual shapes 
  */
  background-image: 
    radial-gradient(
    circle 16px, 
    #eee 99%, 
    transparent 0
  ),
    linear-gradient(#eee 32px, transparent 0),
    linear-gradient(white 420px, transparent 0);

  background-size:
    32px,
    200px 32px,
    100% 100%;

  background-position:
    24px 24px,
    24px 180px,
    0 0;
}

@media screen and (min-width: 47em) {
  :root {
    --card-padding: 32px;
    --card-height: 420px;
  }
}

/*
 * Variables
 */

:root {  
  --card-padding: 24px;
  --card-height: 420px;
  --card-skeleton: linear-gradient(white 420px, transparent 0);
  
  --avatar-size: 32px;
  --avatar-position: 24px 24px;
  --avatar-skeleton: radial-gradient(circle 16px at center, #eee 99%, transparent 0
  );
  
  --title-height: 32px;
  --title-width: 200px;
  --title-position: 24px 180px;
  --title-skeleton: linear-gradient(#eee 32px, transparent 0);
  
  --desc-line-height: 16px;
  --desc-line-skeleton: linear-gradient(#eee 16px, transparent 0);
  --desc-line-1-width:90%;
  --desc-line-1-position: 24px 242px;
  --desc-line-2-width:180px;
  --desc-line-2-position: 24px 265px;
  
  --footer-height: 0px;
  --footer-position: 0 420px;
  --footer-skeleton: linear-gradient(#eee 0px, transparent 0);
  
  --blur-width: 200px;
  --blur-size: 200px 420px;
}

/*
 * Card Skeleton for Loading
 */

.card {
  width: auto;
  height: 420px;

  content:"";
  display:block;    
  border-radius:6px;
  box-shadow: 0 10px 45px rgba(0,0,0, .1);

  background-image:
    linear-gradient(
      90deg, 
      rgba(255,255,255, 0) 0, 
      rgba(255,255,255, .8) 50%, 
      rgba(255,255,255, 0) 100%
    ),                                           /*animation blur*/
    linear-gradient(#eee 32px, transparent 0),  /*title*/
    linear-gradient(#eee 16px, transparent 0),  /*desc1*/
    linear-gradient(#eee 16px, transparent 0),  /*desc2*/
    linear-gradient(#eee 200px, transparent 0),                                               /*avatar*/
    linear-gradient(#eee 0px, transparent 0),     /*footer bar*/
    linear-gradient(white 420px, transparent 0)     /*card*/
  ;

  background-size:
    200px 420px,
    200px 32px,
    200px 16px,
    180px 16px,
    81% 240px,
    100% 40px,
    100% 100%
  ;
  
  background-position:
    -150% 0,                      /*animation*/
    24px 280px,        /*title*/
    24px 342px,  /*desc1*/
    24px 365px,  /*desc2*/
    24px 24px,       /*avatar*/
    0 420px,       /*footer bar*/
    0 0                           /*card*/
  ;

  background-repeat: no-repeat;
  animation: loading 1.5s infinite;
  
}

@keyframes loading {
  to {
    background-position:
      350% 0,        
      24px 280px,  
      24px 342px,
      24px 365px,
      24px 24px,
      0 420px,
      0 0
    ;
  }
}