#purpose {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  /* background: linear-gradient(rgb(3, 11, 34, 0), #030b22), */
}

#purpose::after {
  /* content: "© SHARI SANT"; */
  content: var(--image-credit-purpose, "");
  position: absolute;
  top: 5%;
  left: 5%;
  width: auto;
  height: 100%;
  font-family: "cdmono-regular";
  font-size: var(--heroPhotoCredit);

  /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); */
}

#purpose .foreground {
  position: absolute;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: space-evenly; */
  /* max-width: 56%; */
  /* min-width: 10%; */
}

.tideDataText {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}