@import 'base/base';

.tomster.section.intro {
  h1 {
    text-align: center;
    margin-bottom: 0.5em;
  }
}

#tomster-filter {
  ul {
    text-align: center;
    list-style-type: none;

    li {
      display: inline-block;
    }
  }
}

.tomster.section.list {
  margin: 0 auto;

  #tomster-list {
    display: flex;
    flex-wrap: wrap;
  }

  #tomster-list .tomster-wrapper {
    padding: 20px;
    width: 50%;

    @media screen and (max-width: $medium-screen) {
      width: 100%;
    }
  }

  .tomster-container {
    border-radius: 2px;
    border: 1px solid #ddd;
    background-color: #fff;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }

  .tomster-image {
    text-align: center;
    height: 438px;
    padding: 30px;
    // These next three lines control centering the Tomsters
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      margin-bottom: -4px; // Fixes 4px space below image
      max-width: 100%;
      max-height: 100%;
    }
  }

  .tomster-info {
    @include clearfix;
    display: flex;
    padding: 6px 12px;

    .title {
      font-size: 15px;
      font-weight: bold;
      text-transform: uppercase;
      flex-grow: 1;
      text-align: left;
      &:hover, :focus {
        border-bottom: none;
        text-decoration: underline;
      }
    }

    .date {
      text-align: right;
    }

    p.not-yet-url {
      // If the Tomster entry has no URL, this controls the formatting
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}
