@import "events/constants";
@import "client/common.scss";

.EventList {

 .event-header {
    background-color: $cta-color;
    color: white;
    font-size: 24px;
    text-align: center;
    padding: 20px 0;
    border-width: $chunkyBorderWidth 0 $chunkyBorderWidth;
    border-style: solid;
    border-color: $copy-color-on-dark;
  }

  .event-section {
    padding: 10px;
    //s   border-width: 0 0 $chunkyBorderWidth;
    //border-style: solid;
    //border-color: $copy-color-on-dark;

    &.loading {
      text-align:center;
    }
  }

  .event {
    display:grid;
    grid-template-columns: 10rem 20rem;
    align-content:center;
    height:8rem;
    border-style: solid;
    border-width: 2px 0 2px 0;
    border-color: $copy-color-on-dark;

    &:first-child {
      border-width:0 0 1px 0;
    }
    &:last-child {
      border-width:1px 0 0 0;
    }
    &:only-child {
      border-width:0;
    }

    &.no-image {
      grid-template-columns: 30rem;
    }
  }

  .title-link {
    color:white;
  }
  img.thumb {
    width:100%;
    max-height:400px;
  }
  div.thumb {
    display: grid;
    justify-content: center;
    align-content: center;
    text-transform: uppercase;
    padding-right:1rem;
  }

  .detail {
    display:grid;
    justify-content: center;
    padding-left:1rem;
    align-content:center;
  }

  .title {
    font-size:1.5rem;
  }

  .when {
    font-size:1rem;
  }
}