/* NOTE: for some reason, even tho it is linked properly, 
I had to set the font-family value again on this site for it to display correctly.

I will come back to this and figure out why if I have the time */

h1 {
  font-family: "Playfair Display", serif;
  font-size: Xx-large;
  text-align: left;
  max-width: 32ch;
  line-height: 1px;
}

h2 {
  font-family: "Poppins", sans-serif;
  max-width: 38ch;
  font-size: medium;
  text-align: left;
}

h3 {
  font-family: "Playfair Display", serif;
  font-size: x-large;
}

p {
  font-family: "Roboto", sans-serif;
  max-width: 70ch;
}

/* Hero section */

.involved-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  gap: 30px;
  padding: 25px;
  top: 100px;
}

.involved-hero > * {
  margin: auto;
  line-height: 33px;
}

.involved-top-image img {
  max-height: 410px;
  max-width: 100%;
  margin: auto;
  border-radius: 0px 50px 50px 50px;
}

/* This part moves things around between mobile and desktop. 
See media.css for more */

.involved-h1-desktop {
  display: none;
}

/* Bottom sections is split in four */

.support {
  display: flex;
  flex-direction: column;
  padding: 70px;
  background-color: #f9f9f9;
  grid-column: 1;
}

.internship {
  display: flex;
  flex-direction: column;
  padding: 70px;
  grid-column: 2;
}

.volunteer {
  display: flex;
  flex-direction: column;
  padding: 70px;
  background-color: #f9f9f9;
  grid-column: 1;
}

.volunteer-img-frame {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 25px;
  grid-column: 2;
  max-width: 259px;
  margin: auto;
}

.volunteer-img {
  max-height: 300px;
  max-width: 300px;
  margin: auto;
  border-radius: 0px 50px 50px 50px;
}