.search-results {
  margin: 0 auto;
  max-width: 800px;
  text-align: left;
  width: 100%;

  td:first-child,
  th:first-child {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  a {
    color: #00a99f;
  }

  tbody > tr:nth-child(4n + 3) {
    background-color: #eaeaea;
  }

  [data-search-results-target="details"] {
    dd {
      color: #555;
      margin-bottom: 1rem;
      margin-left: 0;

      @media screen and (min-width: 700px) {
        & {
          margin-bottom: 0;
        }
      }
    }

    dl {
      display: grid;
      gap: 0.1rem;
      white-space: normal;

      @media screen and (min-width: 700px) {
        & {
          gap: 0.5rem;
          grid-template-columns: 1fr 2fr;
        }
      }
    }

    dt {
      color: #888c92;
      font-size: 0.7em;
      text-transform: uppercase;
    }

    td {
      padding: 0 1rem;
    }
  }

  [data-search-results-target="row"] {
    a {
      color: #444;
    }

    td,
    th {
      cursor: pointer;
      padding: 0.4rem;
    }

    td {
      box-sizing: border-box;
      color: #888c92;
      font-size: smaller;
      max-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 20%;

      @media screen and (min-width: 700px) {
        font-size: 1rem;
      }
    }
  }

  [data-search-results-target="row"].active,
  [data-search-results-target="row"]:hover {
    & > td,
    & > th {
      background-color: #00a99f;
      color: white;
    }

    .offering-circular-image {
      fill: white;
    }
  }
}