/* === card ====== 
 * Variation on the panel component
 * version 2018.0315
 * https://codepen.io/jstneg/pen/EVKYZj
 */
.card{
  margin-bottom: 24px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 0;
  height:240px;
}
.card-body{ padding: 8px; display: table; }
.card-heading{ padding: 8px; }
.card-footer{ padding: 8px; }

.card-left{ position: relative; padding: 0 0 8px 0; }
  .card-swap .card-left{ padding: 0 0 8px 0;  }
.card-right{ position: relative; padding: 8px 0 0 0; }
  .card-swap .card-right{ padding: 0 0 8px 0;  }

@media( min-width: 768px ){
  .card-left{ float: left; padding: 0 8px 0 0; }
  .card-swap .card-left{ padding: 0 0 0 8px; }
  .card-right{ float: left; padding: 0 0 0 8px; }
  .card-swap .card-right{ padding: 0 8px 0 0; }

  .card-5-7 .card-left{ width: 41.66666667%; }
  .card-5-7 .card-right{ width: 58.33333333%; }
  .card-5-7 .card-swap .card-left{ width: 41.66666667%; left: 58.33333333%; }
  .card-5-7 .card-swap .card-right{ width: 58.33333333%; right: 41.66666667%; }
  
  .card-6-6 .card-left{ width: 50%; }
  .card-6-6 .card-right{ width: 50%; }
  .card-6-6 .card-swap .card-left{ left: 50%; }
  .card-6-6 .card-swap .card-right{ right: 50%; }
  
  .card-7-5 .card-left{ width: 58.33333333%; }
  .card-7-5 .card-right{ width: 41.66666667%; }
  .card-7-5 .card-swap .card-left{ width: 41.66666667%; left: 58.33333333%; }
  .card-7-5 .card-swap .card-right{ width: 58.33333333%; right: 41.66666667%; }  
  
  .card-8-4 .card-left{ width: 66.66666667%; }
  .card-8-4 .card-right{ width: 33.33333333%; }
  .card-8-4 .card-swap .card-left{ width: 33.33333333%; left: 66.66666667%; }
  .card-8-4 .card-swap .card-right{ width: 66.66666667%; right: 33.33333333%; }
  
  .card-9-3 .card-left{ width: 75%; }
  .card-9-3 .card-right{ width: 25%; }
  .card-9-3 .card-swap .card-left{ width: 25%; left: 75%; }
  .card-9-3 .card-swap .card-right{ width: 75%; right:25%; }
}


/* -- default theme ------ */
.card-default{ border-color: #efefef; background-color: #fff; }
.card-default > .card-heading,
.card-default > .card-footer{ color: #333; background-color: #fdfdfd; }
.card-default > .card-heading{ border-bottom: 1px solid #efefef; padding: 8px; }
.card-default > .card-footer{ border-top: 1px solid #efefef; padding: 8px; }
.card-default > .card-body{  }
.card-default > .card-left{ float: left; padding-right: 4px; }
.card-default > .card-right{ float: left; padding-left: 4px; }
.card-default p:last-child{ margin-bottom: 0; }

.card-default > .card-content{ border-top: 1px solid #888; margin-top: 16px; }