.card {
  grid-template-rows: auto auto 0fr;
  grid-auto-flow: column;

  p {
    grid-row: 3;
  }

  &.open {
    grid-template-rows: auto auto 1fr;
  }

  & > :not(p):nth-child(4n + 3),
  & > :not(p):nth-child(4n + 4) {
    text-align: end;
  }
}

@media only screen and (min-width: 729px) {
  .card {
    grid-auto-flow: row;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;

    &.open {
      grid-template-columns: 1fr 1fr auto;
    }

    & > :not(p):nth-child(4n + 3),
    & > :not(p):nth-child(4n + 4) {
      text-align: initial;
      grid-column: 1;
    }

    & > :not(p):nth-child(4n + 2),
    & > :not(p):nth-child(4n + 4) {
      text-align: end;
      grid-column: 2;
      align-self: center;
    }

    h4 {
      grid-column: span 1 !important;
    }

    .visibility-toggler {
      grid-row: 1;
    }
  }
}