/**
 * @version     CVS: 1.0.0
 * @package     com_obituaries
 * @copyright   Tom F. Vanbrabant
 * @license     GNU General Public License versie 2 of hoger; Zie LICENSE.txt
 * @author      Tom F. Vanbrabant, a.k.a. TVBZ <vanbrabant.tom@gmail.com>
 */

/*** SHARED LAYOUT ***/

#deceased-list {
  margin: 20px 0;
}

.no-items {
  font-style: italic;
}

.deceased-image img {
  width: 100%;
}

h2.deceased-name {
  font-size: 20px;
  line-height: 28px;
  padding: 10px;
  margin: 0;
}

/*** GRID LAYOUT ***/

#deceased-list.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  margin: -10px;
  clear: both;
}

#deceased-list.grid .deceased {
  text-align: center;
  flex-basis: calc((100% / 3) - 23px);
  margin: 10px 10px;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
  #deceased-list.grid .deceased {
    flex-basis: calc((100% / 2) - 22px);
  }
}

@media (max-width: 480px) {
  #deceased-list.grid .deceased {
    flex-basis: 100%;
  }
}

#deceased-list.grid .deceased .image-placeholder {
  position: relative;
  padding-bottom: 66.66%;
  background: rgba(0, 0, 0, 0.1);
}

#deceased-list.grid .deceased .image-placeholder .placeholder-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.1);
  font-size: 50px;
  line-height: 50px;
}

#deceased-list.grid .deceased .deceased-dates {
  padding: 0 10px;
  margin-bottom: auto;
}

#deceased-list.grid .deceased .deceased-buttons {
  padding: 10px;
}

#deceased-list.grid .deceased .deceased-buttons .btn {
  display: inline-block;
  margin: 0 3px 3px;
}

/*
  div.list-footer{
    clear:both;
    text-decoration: none;
    text-align: center;
  }
  
  div.list-footer ul{
    list-style: none;
    display: inline-block;
  }
  
  div.list-footer ul li{
    display: inline-block;
  }
  
  div.list-footer div.limit{
    display: inline-block;
  }
  
  div.list-footer div.counter{
    display: inline-block;
  }
  */
