.aboutMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  margin: 1em auto;
  gap: 1em;
}

.leftMain,
.rightMain {
  width: 45%;
  padding: 2em;
  font-size: 1.45em;
}

.leftMain {
  align-self: flex-start;
  background-color: var(--artPrimary);
  color: white;
  border-radius: 10px;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
}

.centerTitle {
  font-family: 'Hurricane', cursive;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  font-size: 2em;
  margin-bottom: 0.5em;
}

.rightMain {
  align-self: flex-end;
  background-color: var(--corpPrimary);
  color: white;
  border-radius: 10px;
  font-family: 'Raleway', sans-serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
}

.centerMain {
  width: 60%;
  text-align: center;
  font-size: 1.25em;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 2em;
  background-color: var(--corpHighlight);
  color: white;
  border-radius: 10px;
}

.artButton {
  margin: 1em auto;
  padding: 0.25em 1.5em;
  width: fit-content;
  font-size: 1.25em;
  background-color: var(--artSecondary);
  border-radius: 10px;
}

.artLink {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  color: white;
}

.artButton:hover {
  background-color: #71ad87bd;
}

#corpButton {
  background-color: var(--corpHighlight);
}

#corpButton:hover {
  background-color: #7a6054c0;
}

.corpLink {
  font-family: 'Raleway', sans-serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
  text-decoration: none;
  color: white;
}

/* Media Queries */

/* Laptop (Max Width: 1440px) */
@media (max-width: 1440px) {
  .leftMain,
  .rightMain {
    font-size: 1.3em;
    padding: 1.8em;
  }
  .centerMain {
    font-size: 1.2em;
  }
}

/* Laptop (Max Width: 1024px) */
@media (max-width: 1024px) {
  .leftMain,
  .rightMain {
    width: 50%;
    font-size: 1.2em;
    padding: 1.5em;
  }
  .centerMain {
    width: 70%;
    font-size: 1.1em;
    padding: 1.8em;
  }
  .artButton {
    font-size: 1.15em;
  }
}

/* Tablet (Max Width: 768px) */
@media (max-width: 768px) {
  .leftMain,
  .rightMain {
    width: 60%;
    font-size: 1.1em;
    padding: 1.2em;
  }
  .centerMain {
    width: 80%;
    font-size: 1em;
    padding: 1.5em;
  }
  .artButton {
    font-size: 1em;
    padding: 0.2em 1.2em;
  }
}

/* Mobile (Max Width: 480px) */
@media (max-width: 480px) {
  .leftMain,
  .rightMain {
    width: 80%;
    font-size: 1em;
    padding: 1em;
  }
  .centerMain {
    width: 90%;
    font-size: 0.9em;
    padding: 1.2em;
  }
  .artButton {
    font-size: 0.9em;
    padding: 0.2em 1em;
  }
}
