/**
* @file
* This file is used to style the 'Card' view mode.
*/

.view-mode-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 2px  groove #76A5AF;
  align-items: center;
  align-content:center;
  margin: 1.5rem;
  background-color: #ffcccc;
}

@media screen and (max-width: 496px ) {
  .view-mode-card  {
  display: block;
  flex-direction: column;
  width: 80%;
  padding: 1em;
  margin: 2em;
  text-align: center;
  align-items: center;
  float: left;
  }
}

@media screen and (max-width: 496px ) {

   .view-mode-card img {
  width: 30%;
  height :30%;
}
  }


.view-mode-card .node__title {
  flex-grow: 1;
  align-content:center;
}

.view-mode-card .field--name-title {
  text-decoration: none;
  color: #000;
  font-size: 1.424rem;
  font-weight: 400;
  align-content:center;
}

.view-mode-card .node__link {
  text-decoration: none;
  color: #000;
  background-color: #ffb3bf;
  align-content:center;
}

.view-mode-card .node__link:focus,
.view-mode-card .node__link:hover {
  text-decoration: underline;
  color: #000;
}

/* Need to fix IE11 cards height issue */
.view-mode-card .node__content {
  flex-shrink: 0;
}

.view-mode-card .field--name-field-media-image img {
  display: block;
  width: 100%;
  margin-bottom: 1.2em;
}

.view-mode-card .label-items {
  color: #76A5AF;
  font-size: 0.889rem;
}