.three-columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1rem;
  padding: var(--padding);
}
@supports (grid-template-rows: subgrid) {
  .three-columns {
    grid-template-rows: 3px auto auto auto;
  }
}
@media (max-width: 1024px) {
  .three-columns {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: var(--padding-top);
  }
}
.three-columns__column {
  grid-column: span 4;
  max-width: 90%;
  justify-items: start;
}
@supports (grid-template-rows: subgrid) {
  .three-columns__column {
    display: grid;
    grid-gap: 0;
    grid-template-rows: subgrid;
    grid-row: 1/-1;
  }
}
@media (max-width: 1024px) {
  .three-columns__column {
    grid-column: span 12;
    display: block;
    grid-template-rows: unset;
    max-width: 100%;
  }
}
.three-columns__column hr {
  width: 100%;
}
.three-columns__column:nth-child(2) {
  justify-self: center;
}
.three-columns__column:nth-child(3) {
  justify-self: end;
}
.three-columns__column .p {
  margin-top: 1.16em;
}
.three-columns__column .button {
  margin-top: 1.77em;
}
.three-columns__heading {
  margin-top: 0.88em;
}