.summary {
  margin-block-end: var(--spacing-9);

  .summary-title-container {
    .summary-title {
      line-height: var(--line-heights-normal);
      margin-block: 0 var(--spacing-2);
      margin-inline: 0;
    }

    .summary-subtitle {
      margin-block-end: var(--spacing-5);
    }
  }

  .summary-block {
    .summary-headers {
      display: none;
    }

    div.summary-content {
      div.summary-row {
        align-items: center;
        border-bottom: 1px solid var(--colors-border-weak);
        display: grid;
        gap: var(--spacing-3);
        grid-template-areas: 'title button' 'local state';
        grid-template-columns: repeat(2, 1fr);
        margin-block-end: var(--spacing-4);
        padding-block-end: var(--spacing-4);

        &:last-child {
          border-bottom: none;
          margin-block-end: 0;
          padding-block-end: 0;
        }

        h2.job-title {
          font-size: var(--font-sizes-3);
          grid-area: title;
          line-height: var(--line-heights-normal);
          margin: 0;
        }

        .job-local {
          grid-area: local;
        }

        .job-state {
          grid-area: state;
        }

        .job-local,
        .job-state {
          p {
            margin-block: var(--spacing-2);
          }

          div {
            span {
              color: var(--colors-foreground);
              font-size: var(--font-sizes-3);
              font-weight: 700;
              line-height: var(--line-heights-normal);
            }
            small {
              white-space: nowrap;
            }
          }
        }

        .button-cell {
          display: flex;
          justify-content: end;
          grid-area: button;
        }
      }
    }
  }

  @media screen and (min-width: 768px) {
    .summary-subtitle {
      margin-block-end: var(--spacing-6);
    }

    .summary-block {
      .summary-headers {
        display: grid;
        gap: var(--spacing-3);
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        margin-block-end: var(--spacing-6);
        padding: 0;
      }

      div.summary-content {
        div.summary-row {
          grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
          grid-template-areas: 'title local state button';

          h2.job-title {
            font-weight: 500;
          }

          .job-local,
          .job-state {
            p {
              display: none;
            }
          }

          .button-cell {
            a {
              display: block;
              text-align: center;
              width: 100%;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 767px) {
    .summary-title-container {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-block-end: var(--spacing-5);

      .summary-title,
      .summary-subtitle {
        margin-block: 0;
      }
    }

    .summary-block {
      div.summary-content {
        div.summary-row {
          .button-cell {
            a {
              color: var(--colors-info-800);
              background: none;
              padding: 0;
            }
          }
        }
      }
    }
  }
}