/* Rem and EM do not depend on the HTML font size aka 1 rem will equal 16px in media queries.
1 rem = 1 em = 16px. We use em in media queries due to bugs in browsers from rem on media queries. */

/* ================================= */
/* Breakpoint  1277px  */
/* ================================= */
@media (max-width: 80em) {
  .nav-bar__links {
    font-size: 2rem;
  }

  .btn,
  .btn:link,
  .btn:visited {
    padding: 0.75rem 3rem;
  }

  .read-btn {
    padding: 0 0;
  }
  .close-btn {
    padding: 0 0;
  }
}
/* ================================= */
/* Breakpoint  1169px  */
/* ================================= */
@media (max-width: 73em) {
  .nav-bar {
    padding: 1rem 1rem;
  }
  .event-tile__header {
    font-size: 2rem;
    font-weight: 700;
  }
  .event-tile__description {
    font-size: 1.8rem;
    font-weight: 500;
  }
  .donate__motivation-item {
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.5;
  }
  .meet-our-team__founders-text {
    font-size: 2rem;
  }
}
/* ================================= */
/* Breakpoint  1058px  */
/* ================================= */
@media (max-width: 66em) {
  body {
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 0rem;
  }
  .nav-bar {
    border-radius: 0px 0px 0 0;
    width: 100vw;
  }
  .header__hero--box {
    padding: 0 0;
  }
  .header__hero--img {
    border-radius: 0px;
  }
  .calendar__text p {
    font-size: 3rem;
  }
  .donate__motivation-item {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .section-donors__img-logo {
    width: 24%;
  }
}
/* ================================= */
/* Breakpoint  996px  */
/* ================================= */
@media (max-width: 63em) {
  .nav-bar__logo {
    width: 33%;
  }
  .nav-bar__links {
    display: none;
  }
  .nav-bar__icons {
    display: block;
    padding: 0rem 3rem;
  }
  .btn__cta {
    display: none;
  }
  .btn__cta-newsletter {
    display: block;
    margin: 3rem auto;
  }
  .primary-heading {
    font-size: 3rem;
    font-weight: 700;
  }
  .secondary-heading {
    font-size: 2.5rem;
  }
  .tertiary-heading {
    font-size: 2.4rem;
  }
  .paragraph-normal {
    font-size: 2rem;
  }
  .header__hero--box {
    padding: 0rem 0rem;
    width: 95vw;
    height: auto;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 16%;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    row-gap: 5rem;
  }

  .meet-our-team__founders-text {
    margin-bottom: 5rem;
  }
  .event-tile__header {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 6rem;
  }
  .event-tile__description {
    font-size: 3rem;
    font-weight: 500;
  }
  .event-tile__background-img {
    width: 60%;
  }
  .donate__img {
    width: 100%;
  }
  .photo-wall__img {
    width: 40%;
    height: auto;
  }
  .photo-wall__link-color {
    color: #69202f;
    border-bottom: none;
    border-radius: 0px;
    padding: 0 0;
    font-size: 1.4rem;
    text-transform: capitalize;
  }
  .photo-wall__button-container {
    margin-bottom: 8rem;
  }
  /* .photo-wall {
    margin-bottom: 10rem;
  } */
  .meet-our-team__founders-img {
    width: 75%;
  }
  .meet-our-team {
    margin-bottom: 8rem;
  }
}
/* ================================= */
/* Breakpoint  741px  */
/* ================================= */
@media (max-width: 46em) {
  .primary-heading {
    font-size: 3rem;
  }
  .secondary-heading {
    font-size: 1.8rem;
  }
  .header__hero--box {
    padding: 0rem 0rem;
  }
  .tertiary-heading {
    font-size: 3rem;
  }
  .paragraph-normal {
    font-size: 2rem;
  }
  .event-tile__background-img {
    width: 80%;
  }
  .event-tile__header {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 6rem;
  }
  .event-tile__description {
    font-size: 1.6rem;
    font-weight: 400;
  }
  .calendar__title {
    font-size: 1.8rem;
  }
  .calendar__month {
    font-size: 1.8rem;
  }
  .calendar__text p {
    font-size: 1.8rem;
  }
  .calendar__icon {
    font-size: 1.8rem;
  }
  .calendar__icon-up {
    font-size: 1.8rem;
  }
  .info__description {
    font-size: 1.8rem;
  }
  .footer__nav-list {
    flex-direction: column;
  }
  .footer__nav-links {
    margin-bottom: 2rem;
    margin-right: 0rem;
  }
  .u-margin-right-2 {
    margin-right: 1rem;
  }
  .grid {
    row-gap: 0rem;
  }
  .our-mission__mission-text {
    margin-bottom: 7.5rem;
  }

  .photo-wall__bio-name {
    font-size: 2rem;
  }
  .photo-wall__bio-bio {
    font-size: 1.8rem;
  }
  .photo-wall__name {
    font-size: 2rem;
  }
}
/* ================================= */
/* Breakpoint  560px  */
/* ================================= */
@media (max-width: 35em) {
  .header__hero--img {
    padding: 0 0;
    width: 100vw;
    height: 35rem;
  }
  .nav-bar {
    padding: 2rem 2rem;
  }
  .event-tile__header {
    margin-bottom: 3rem;
  }
  .section-donors__img-logo {
    width: 30%;
  }
  .our-mission__img {
    width: 100%;
  }
  .calendar__slide {
    width: 100%;
  }
  .margin-bottom-15 {
    margin-bottom: 7.5rem;
  }
  .margin-bottom-10 {
    margin-bottom: 5rem;
  }
  .margin-bottom-5 {
    margin-bottom: 2.5rem;
  }
}
/* ================================= */
/* Breakpoint  465px  */
/* ================================= */
@media (max-width: 29em) {
  .header__hero--img {
    width: 100vw;
    /* height: 85vh; */
  }
  .primary-heading {
    font-size: 2rem;
  }
  .secondary-heading {
    font-size: 1.6rem;
  }
  .tertiary-heading {
    font-size: 1.6rem;
    font-weight: 700;
  }
  .paragraph-normal {
    font-size: 1.6rem;
  }
  .event-tile__header {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
  }
  .event-tile__description {
    font-size: 1.6rem;
    font-weight: 500;
  }
  .event-tile__text-box {
    width: 60%;
    margin: 0 auto;
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -12.5%);
  }
  .u-margin-right-2 {
    margin-right: 0.5rem;
  }
  .btn {
    font-size: 1.2rem;
  }
  .newsletter {
    padding: 1rem 1rem;
  }
  .grid__newsletter {
    column-gap: 0rem;
  }
  .newsletter__form-label {
    font-size: 2rem;
  }
  .newsletter__form-email {
  }
  .nav-bar__icons {
    margin-right: 1rem;
  }
}
/* ================================= */
/* Breakpoint  1624px  */
/* ================================= */
@media (min-width: 101em) {
  .get-involved__wrapper-bottom {
    max-width: 120em;
    margin: 0 auto;
  }
  .calendar__wrapper {
    max-width: 120em;
    margin: 0 auto;
  }
  .primary-heading {
    font-size: 7.2rem;
    margin-bottom: 20rem;
  }
  .secondary-heading {
    font-size: 5.4rem;
    margin-bottom: 15rem;
  }
  .tertiary-heading {
    font-size: 4.8rem;
    font-weight: 700;
  }
  .paragraph-normal {
    font-size: 3.6rem;
  }
  .nav-bar__links {
    font-size: 4rem;
  }
  .btn {
    font-size: 3rem;
  }
  .event-tile__header {
    font-size: 4.8rem;
    font-weight: 700;
    margin-bottom: 5rem;
  }
  .event-tile__description {
    font-size: 3rem;
    font-weight: 500;
  }
  .info__description {
    font-size: 3rem;
  }
  .info__time {
    font-size: 2.6rem;
  }
  .info__location {
    font-size: 2.6rem;
  }
  .info__leader {
    font-size: 2.6rem;
  }
  .calendar__details {
    margin-top: 4.8rem;
  }
  .donate__subheading {
    font-size: 5.4rem;
  }
  .donate__motivation-item {
    font-size: 3.6rem;
  }
  .photo-wall__name {
    font-size: 3.6rem;
  }
  .meet-our-team__founders-subheading {
    font-size: 4.8rem;
  }
  .meet-our-team__founders-text {
    font-size: 3.6rem;
  }
  body {
    font-size: 2.4rem;
  }
}