.challenges {
  --card-height: 23.6rem;
  --gap: 0.4rem;
  --radius: 0.4rem;

  display: grid;
  gap: 1.6rem;
  grid-template-areas:
    "header"
    "section"
    "aside";
}

.header {
  grid-area: header;
}

.subtitle {
  color: var(--some-black-color, #000);
  /* font-family: var(--ff-biro-script-plus); */
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8rem;
  margin: 0;
}

.title {
  color: var(--some-black-color, #000);
  /* font-family: var(--ff-brandon-text); */
  font-size: 1.6rem;
  font-weight: 900;
  inline-size: 18rem;
  line-height: 1.8rem;
  margin: 0;
  overflow-wrap: break-word;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
}

.section {
  display: grid;
  gap: 0.8rem;
  grid-area: section;
}

.journeys {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr 1fr;
}

.journey {
  align-content: center;
  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2));
  border-radius: var(--radius);
  display: grid;
  gap: 1.2rem;
  height: var(--card-height);
  justify-items: center;
}

.journey:first-of-type {
  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1));
}

.aside {
  display: grid;
  gap: 0.8rem;
  grid-area: aside;
  grid-template-rows: auto 1fr;
}

.victories {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(11.6rem, 1fr));
}

.victory {
  align-content: center;
  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius);
  display: grid;
  gap: 0.6rem;
  height: 100%;
  justify-items: center;
}

.victory:first-of-type {
  background-color: var(--some-grey-color, rgba(3, 3, 3, 0.3));
}

.victory:last-of-type {
  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2));
}

.circle {
  display: none;
}

@media screen and (max-width: 1366px) {
  .victory:first-of-type {
    grid-row: 1 / -1;
  }
}

@media screen and (min-width: 1367px) {
  .challenges {
    gap: 2.6rem 1.5rem;
    grid-template-areas:
      "header header"
      "section aside";
    grid-template-columns: 1fr 16.6rem;
  }

  .journeys {
    grid-template-columns: 1fr;
  }

  .journey .subtitle {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }

  .journey .title {
    font-size: 2.6rem;
    inline-size: 25rem;
    line-height: 3.2rem;
  }

  .victories {
    grid-template-columns: 1fr;
    grid-template-rows: var(--card-height) 1fr 1fr;
  }

  .circle {
    align-items: center;
    background-color: var(--some-white-color, #fff);
    border-radius: 50%;
    display: flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
  }

  .victory .subtitle {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }

  .victory .title {
    inline-size: 13rem;
  }
}