.search-stub:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  font-size: 11px;
  border-bottom: 1px solid #E4E4E4;
  span {
    overflow-wrap: anywhere;
  }
  .topbar {
    background: #386cc2;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #fff;
  }
  .img-wrap {
    grid-row: 2 / 6;
    border-right: 1px solid #E4E4E4;
    border-left: 1px solid #E4E4E4;
  }
  .type {
    grid-column: 2 / 9;
    background: #f1f6ff;
    text-align: left;
    color: #912;
    border-right: 1px solid #e4e4e4;
    padding: 4px 4px 0;
  }
  .description {
    grid-column: 2 / 9;
    background: #f1f6ff;
    text-align: left;
    color: #19386b;
    border-right: 1px solid #e4e4e4;
    padding: 0 4px 4px;
  }
  .price-bar {
    grid-column: 2 / 9;
    background: url('assets/img/bline.jpg');
    background-repeat: repeat-x;
    border-right: 1px solid #e4e4e4;
    padding: 4px;
    .price a {
      color: #19386b;
      &:hover {
        color: #08e;
      }
    }
    .spec {
      align-self: center;
      justify-self: center;
      background: #e82;
      border-top: 1px solid #ee882244;
      border-right: 1px solid #a05c23;
      border-bottom: 1px solid #a05c23;
      border-left: 1px solid #ee882244;
      color: #fff;
      font: 700 10px sans-serif;
      padding: 0 2px;
      word-break: normal;
      margin: 0 1rem 0 auto;
      cursor: pointer;
    }
  }
  .dark-blue-left {
    border-left: 1px solid #386cc2;
  }
  .dark-blue-right {
    border-right: 1px solid #386cc2;
  }
  .databar {
    color: #912;
    align-self: center;
  }
  .z {
    color: #912;
    border-right: 1px solid #e4e4e4;
    display: flex;
    justify-content: center;
    align-items: center;
  }
} @media (min-width:800px) { .search-stub:not([hidden]) {
  display: grid;
  align-items:stretch;
  grid-template-columns: 5rem 1fr 1fr 1fr 1fr 1fr 1fr auto;
  .dark-blue-right {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .img-wrap {
    height: 100%;
    display:flex;
    align-items: center;
    justify-content:center;
    z-index: 1;
    img {
      width:calc(80px - 1rem);
      margin: .5rem;
    }
  }
  .databar {
    padding: 2px 0;
  }
  
  .type {
    padding: .5rem 4px 2px;
    
  }
  .description {
    padding: 2px 4px 1rem;
  }
  .price-bar {
    text-align: left;
    padding: 1rem 4px 1rem 1rem;
    height: 16px;
    margin-top: auto;
    .price {
      font-size: 12px;
    }
  }
}}
  
