/* For buttons used for navigation in the main index pages */

/* Adapt the grid to work with buttons */
.md-typeset .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr));
  grid-gap: .5rem;
  margin: 1em 0;
  align-content: start;
  align-items: stretch;

  & > p {
    display: contents;  /* Makes the <p> wrapper invisible to grid layout */
    margin: 0;
  }

  .md-button {
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: .4rem;
    padding: .8rem 2rem;
    background-color: var(--button-primary-bg-color);
    border-color: var(--button-primary-bg-color);
    box-sizing: border-box;

    &:hover {
      border-color: var(--color-nav2-light-blue);
      background-color: var(--color-nav2-light-blue);
      box-shadow: 0 2px 2px #00000034;
      transform: translateY(-1px);
      transition: position 0.2s ease;
    }
  }
}