/**
 * @file
 * Tile. The cover image comes from a field formatter.
 */

.tile {
  display: flex;
  flex-direction: column;
  min-height: 396px;
  color: var(--imtm-color-text);
  text-decoration: none;
  background-color: var(--imtm-color-white);
  box-shadow: var(--imtm-shadow-tile);
  transition: box-shadow 0.25s ease;
}

.tile:hover {
  text-decoration: none;
  box-shadow: var(--imtm-shadow-tile-hover);
}

.tile__image img {
  width: 100%;
  min-height: 200px;
  max-height: 200px;
  vertical-align: middle;
  object-fit: cover;
}

.tile__title {
  margin: 1.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--imtm-color-text);
}

.tile__meta {
  margin: auto 1.75rem 1.75rem;
  font-size: 1.1rem;
  color: var(--imtm-color-text-muted);
}

.tile__meta strong {
  display: block;
}

.tile--compact {
  min-height: 348px;
}

.tile--compact .tile__image img {
  min-height: 150px;
  max-height: 150px;
}

.tile--compact .tile__title {
  margin: 1.5rem;
  font-weight: 400;
}