#by-the-numbers {
  background-image: url(../assets/images/home/numbers/numbers-background-320.png);
  aspect-ratio: 10 / 47;
  background-size: cover;
  /* background-position: center center; */
  background-repeat: no-repeat;
  height: 100%;
}
.numbers {
  display: flex;
  flex-direction: column; /* Stacks text and image vertically on mobile */
  width: 280px;
  margin: 0 auto;
}
.title-text-wrapper {
  margin: 2.5rem auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
}
.numbers-event-bar {
  width: 100%;
  display: flex;
  flex: 1;
  height: 0.6rem;
}
.blue {
  background-color: #8f99c8;
}
.green {
  background-color: #9abeb0;
}
.purple {
  background-color: #a592c7;
}
.yellow {
  background-color: #f0cb8e;
}

.title-wrapper,
.text-wrapper {
  width: 100%;
}
.title-wrapper h2 {
  color: #fbfbfc;
  font-family: "Montserrat", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: normal;
  margin-top: 0.75rem;
}
.text-wrapper p {
  color: #fbfbfc;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.85px;
}
#report-button {
  display: flex;
  width: fit-content;
  height: 60px;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9.803px;
  border: 0.469px solid #fbfbfc;
  color: #fbfbfc;
  font-family: "Barlow Condensed";
  font-size: 2.1rem !important;
  font-style: normal;
  font-weight: 400;
  line-height: 23.528px; /* 94.111% */
  letter-spacing: 0.314px;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}
#report-button:hover {
  background: rgba(251, 251, 252, 1);
  color: var(--Netural-Indigo-1000);
}
.graphics-content {
  display: flex;
  width: 23.333rem;
  margin: 0 auto;
}
.graphics-wrapper {
  width: 17.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 1rem;
}
.graphics-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* width: 23.33rem; */
  min-height: 16.25rem;
  gap: 1rem;
}
.graphics-bottom {
  margin: 0;
  width: 100%;
}
.graphic .graphics-top,
.graphics-bottom,
.graphic-one,
.graphic-two,
.graphic-three {
  box-sizing: border-box;
}
.graphic {
  flex-shrink: 0;
}
.graphic-one {
  width: 57.5%;
  min-height: 16.25rem;
  padding: 0;
  margin: 0 auto;
}
.graphic-two {
  width: 37.5%;
  min-height: 16.25rem;
  padding: 0;
  margin: 0 auto;
}
.graphic {
  padding: 14.816px 12.537px;
  border-radius: 1.04169rem;
  border: 0.417px solid rgba(251, 251, 252, 0);
  background: linear-gradient(
    180deg,
    rgba(251, 251, 252, 0.6) 0%,
    rgba(251, 251, 252, 0.36) 100%
  );
  backdrop-filter: blur(4.166666507720947px);
}
.graphic h3 {
  color: #fbfbfc;
  text-align: center;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.7px;
  margin: 0 auto 0.5rem auto;
}
.interns h3 br {
  display: none;
}
.graphic p {
  color: #fbfbfc;
  text-align: center;
  font-family: Montserrat;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.8px;
  margin: 0 auto 0.5rem auto;
}
.graphic-one p {
  margin: 0.75rem 0;
}
.graphic-one img {
  width: 122px;
  margin-top: 0.75rem;
}
.graphic-three img {
  width: 234px;
}
@media screen and (min-width: 576px) {
  #by-the-numbers {
    background-image: url(../assets/images/home/numbers/numbers-background-576.png);
    aspect-ratio: 576 / 1811;
  }
}
@media screen and (min-width: 768px) {
  #by-the-numbers {
    background-image: url(../assets/images/home/numbers/numbers-background-768.png);
    aspect-ratio: 256 / 783;
  }
  .numbers {
    min-width: 644px;
    max-width: 644px;
    width: 100%;
  }
  .title-wrapper {
    width: 300px;
  }
  .title-wrapper h2,
  #report-button {
    font-size: 2.45rem !important;
  }
  .text-wrapper p {
    font-size: 1.65rem;
  }
  .text-wrapper a {
    min-width: 425px;
  }
  .text-wrapper a br {
    display: none;
  }
  .graphics-content,
  .graphics-wrapper,
  .graphics-top,
  .graphics-bottom {
    width: 46.25rem;
  }
  .graphic-one {
    width: 279px;
    margin-right: 0.75rem;
  }
  .graphic-two {
    width: 245px;
    margin-left: 0.75rem;
  }
  .graphic-one p {
    margin-top: 1.5rem;
  }
  .graphic-one img {
    width: 252px;
    margin-top: 1.5rem;
  }
  .graphic h3 {
    font-size: 2.25rem;
  }
  .graphic p {
    font-size: 85px;
  }
  .interns h3 br {
    display: inline;
  }
  .graphics-top {
    margin-bottom: 2rem;
  }
  .graphic-three img {
    width: 536px;
  }
}
@media screen and (min-width: 992px) {
  #by-the-numbers {
    background-image: url(../assets/images/home/numbers/numbers-background-992.png);
    aspect-ratio: 992 / 2533;
  }
}

@media screen and (min-width: 1200px) {
  #by-the-numbers {
    background-image: url(../assets/images/home/numbers/numbers-background-1200.png);
    aspect-ratio: 400 / 499;
  }
  .numbers {
    min-width: 688px;
    max-width: 688px;
    width: 100%;
    padding-top: 5rem;
    margin-left: 5rem;
  }
  .title-wrapper h2,
  #report-button {
    font-size: 2.8rem !important;
  }
  .text-wrapper p {
    font-size: 1.9rem;
  }
  .graphics-content {
    min-width: 688px;
    max-width: 688px;
    width: 100%;
    padding-top: 1rem;
    margin-left: 5rem;
  }
  .graphics-content,
  .graphics-wrapper,
  .graphics-top,
  .graphics-bottom {
    width: 52.25rem;
  }
  .graphic-one {
    width: 335px;
    margin-left: 0;
    margin-right: 0.75rem;
  }
  .graphic-one img {
    width: 285px;
    margin-left: 0.5rem;
  }
  .graphics-wrapper {
    margin: 0;
  }
  .graphic-two {
    width: 250px;
    margin-left: 1rem;
    margin-right: 0;
  }
  .graphic-three img {
    width: 600px;
    margin-left: 0.5rem;
  }
  .title-text-wrapper {
    margin-top: 0;
  }
  .title-wrapper {
    width: 400px;
  }
  .text-wrapper {
    width: 640px;
  }
  .text-wrapper a {
    min-width: 510px;
  }
  .graphics-top {
    gap: 2rem;
  }
}

@media screen and (min-width: 1400px) {
  #by-the-numbers {
    background-image: url(../assets/images/home/numbers/numbers-background-1400.png);
    aspect-ratio: 1400 / 1497;
  }
}
@media screen and (min-width: 1920px) {
  #by-the-numbers {
    background-image: url(../assets/images/home/numbers/numbers-background-1920.png);
    aspect-ratio: 1920 / 1313;
    background-position: right center;
  }

  .by-the-numbers {
    display: flex;
    flex-direction: row;
    padding-top: 15rem;
  }
  .numbers {
    margin-top: 2.5rem;
    min-width: 971px;
    max-width: 971px;
    width: 100%;
  }
  .title-wrapper h2,
  #report-button {
    font-size: 4.2rem !important;
  }
  .text-wrapper p {
    font-size: 2.35rem;
  }
  .title-text-wrapper {
    width: 971px;
    /* margin-left: 2.5rem; */
  }
  .text-wrapper {
    width: 971px;
  }
  .title-wrapper {
    width: 460px;
  }
  .text-wrapper a {
    width: 620px;
  }
  .graphics-content,
  .graphics-wrapper,
  .graphics-top,
  .graphics-bottom {
    width: 600px;
    margin: 0;
        gap: 3rem;
  }
  .graphic h3,
  .graphic p {
    margin: 0;
  }
  .graphic h3 {
    font-size: 1.65rem;
  }
  .graphic-one img {
    width: 265px;
  }
  .graphic-one {
    width: 305px;
  }
  .graphics-content {
    padding-top: 5rem;
    margin-top: 2.5rem;
  }
  .graphic-one,
  .graphic-two {
    margin: 0;
  }
  .graphic-three img {
    width: 555px;
  }
}