.wordflip {
  section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    place-items: center;
    margin: 5px 0px;

    wc-flipper, wc-flipper-image {
      width: 100px;
      height: 100px;
      border: var(--border) solid var(--black);
      background-color: var(--lightGrey);
    }

    wc-flipper {
      text-align: center;
      align-content: center;
      &::part(front) {
        text-wrap: balance;
        word-break: break-word;
      }
    }
  }
  hr {
    border-top: var(--border) dashed black;
  }
}