.outcomes-container {
  container-type: inline-size;
  container-name: outcomes-container;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  padding: 0;

  @container outcomes-container (min-width: 0px) {
    grid-template-columns: 1fr;
  }

  @container outcomes-container (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @container outcomes-container (min-width: 1120px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @container outcomes-container (min-width: 1500px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.action-card-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  min-width: 0;
}

.outcome-container {
  container-type: inline-size;
  container-name: outcome-container;
}

.action-details-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  padding: 0;
  align-items: start;
  width: 100%;
  @container outcome-container (min-width: 0px) {
    grid-template-columns: 1fr;

    grid-template-areas:
      "details"
      "votes";
  }

  @container outcome-container (min-width: 1000px) {
    grid-template-columns: 7.5fr 4.5fr;

    grid-template-areas: "details votes";
  }
}

.action-details {
  grid-area: details;
  container-type: inline-size;
  container-name: action-details;
}

.action-votes {
  grid-area: votes;
}

.markdown-content-wrapper {
  box-sizing: border-box;

  @container action-details (min-width: 0px) {
    width: 100%;
  }
}

.markdown-content-wrapper h1,
.markdown-content-wrapper h2,
.markdown-content-wrapper h3,
.markdown-content-wrapper h4,
.markdown-content-wrapper h5,
.markdown-content-wrapper h6 {
  margin: 8px 0;
}

.markdown-table-wrapper {
  display: block;
  overflow: scroll;
  touch-action: pan-x pan-y;
  box-sizing: border-box;
  margin: 8px 0;
}

.markdown-table-wrapper table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

.markdown-table-wrapper table thead {
  background-color: #d6e2ff80;
}

.markdown-table-wrapper table th,
.markdown-table-wrapper table td {
  padding: 6px 13px;
  border: 1px solid #d6e2ff;
}

.markdown-table-wrapper table td > :last-child {
  margin-bottom: 0;
}

.markdown-table-wrapper table tr:nth-child(2n) {
  background-color: #d6e2ff80;
}