/* div which contains the pealboard image and the text */
.pealboard {
    position: relative; /* This stays to anchor the text */
    display: inline-block; /* Keeps the container the same size as the image */
    padding: 10px; /* Separate the pealboards a bit */
}

/* The pealboard image */
.pealboard img {
    display: block; /* Something to do with reducing gap at bottom of img */
    width: 100%;
    height: auto;
}

/* The text inside the pealboard */
.pealboard-text {
    position: absolute;
    top: 55%; /* Positioning the text - move down slighty so pealboards look better */
    left: 50%;
    /* Offset the text by its own width/height */
    transform: translate(-50%, -50%);
    
    width: 70%;
    text-align: center;
    word-wrap: break-word; /* For breaking long words */
    
    color: black; /* Doesn't affect the link (need to use a {color: inherit})  */
    font-family: "Gill Sans MT";
    font-size: 1.5vw; /* This makes the font size relative to window */
}
.pealboard-text p {
   margin-bottom: -15px; /* Reduce the space between paragraphs */
  }

/* Create a flex div so the pealboards can stack on small screens */
.stacking-div {
  justify-content: center;
  align-items: center;
  flex-direction: row; /* When on computer stack pealboards side by side */
  display: flex;
  padding-left: 30px; /* Padding on either side of the group of pealboards */
  padding-right: 30px;
  }

/* When on a small screen, stack the pealboards vertically */
@media screen and (max-width: 750px) {
  .stacking-div {
    flex-direction: column; /* stack vertically */
  }
  .pealboard-text {
      font-size: 8vw; /* Change the font size when they stack */
  }
}