/* TODO: Fix when brought back into the loop */

.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;
}

.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;
  }

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

  .circle {
    align-items: center;
    background-color: var(--Main-Grey-White);
    border-radius: 50%;
    display: flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
  }
}