.home-outer-wrapper {
  padding-block: 2rem;
  padding-inline: 1rem;
}

.hero {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;

  background-color: white;
  padding: 1rem;
  border-radius: 1rem;
  max-inline-size: fit-content;
  margin-inline: auto;

  .hero-text {
    max-inline-size: 25rem;
  }

  li + li {
    margin-block-start: 0.25em;
  }

  .btn {
    inline-size: 100%;
    --btn-clr: white;
    --btn-bg-clr: var(--clr-primary);
  }
}

.board {
  text-transform: uppercase;
  text-align: center;
  user-select: none;
  touch-action: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1.55em);
  isolation: isolate;
}

.board .row {
  display: contents;
}

.board .row .cell {
  aspect-ratio: 1;

  grid-row: var(--grid-row);
  grid-column: var(--grid-column);

  display: grid;
  place-items: center;
}

.cow-selector {
  --true-start-row: min(var(--grid-row-start), var(--grid-row-end));
  --true-end-row: max(var(--grid-row-start), var(--grid-row-end));
  --true-start-col: min(var(--grid-column-start), var(--grid-column-end));
  --true-end-col: max(var(--grid-column-start), var(--grid-column-end));

  border: solid var(--clr-muted-primary) 3px;
  border-radius: 20px;

  grid-row: var(--true-start-row) / calc(var(--true-end-row) + 1);
  grid-column: var(--true-start-col) / calc(var(--true-end-col) + 1);
}

.cow-selector.diagonal {
  --size: calc(abs(var(--grid-row-start) - var(--grid-row-end)) + 1);
  /* 1 if selection is going down and right, 0 otherwise */
  --same-sign: calc(
    (
        sign(
            sign(var(--grid-row-start) - var(--grid-row-end)) *
              sign(var(--grid-column-start) - var(--grid-column-end))
          ) +
          1
      ) /
      2
  );

  /* We want it to only have the height of one row, even though 
                we're spanning multiple when diagonal */
  height: calc(100% / var(--size));
  /* Extra length for diagonal */
  width: calc(100% * sqrt(2));

  /* Center within the cells */
  place-self: center;

  /* Rotate around the cells, using --same-sign to get the direction right */
  rotate: calc(-45deg + var(--same-sign) * 90deg);
}