/* Container for multiple problems */
.ipt_problems {
  display: flex;
  flex-wrap: wrap;
  gap: 5vw;
  margin: 0 5vw;
}

/* Individual problem container */
.problem {
  width: 100%;
  margin-bottom: 5vh;
}

/* Problem with image and description side by side */
.problem_with_img {
  display: flex;
  gap: 5vw;
  width: 100%;
  flex-wrap: wrap;
}

/* Description container */
.problem_description_container {
  width: 100%;
}

/* Image container */
.problem_img_container {
  margin-top: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Problem image */
.problem_img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0.5vh;
}

/* Problem description text */
.problem_description {
  font-size: 0.9rem;
  font-family: Arial, Helvetica, sans-serif;
}

/* Tournament section */
.tournament {
  text-align: center;
  margin-top: 5vh;
}

.tournament h3 {
  font-family: 'Times New Roman', Times, serif;
  font-size: smaller;
}

/* Container for tournament images */
.tournament_imgs_container {
  margin: 0 5vw;
  text-align: right;
}

/* Tournament images */
.tournament_img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 2vh;
  object-fit: cover;
}

/* Results section */
.results {
  display: flex;
  justify-content: center;
  gap: 5vw;
  margin-top: 10vh;
  flex-wrap: wrap; /* allow items to stack on small screens */
}

.results_text {
  flex: 1 1 300px; /* flexible width, minimum 300px */
}

.results_img {
  flex: 1 1 300px; /* flexible width, minimum 300px */
  display: flex;
  justify-content: center;
  align-items: center;
}

.results_img img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5vh;
}

/* Collage section */
.collage {
  display: flex;
  flex-wrap: wrap;
  gap: 5vw;
  justify-content: center;
  margin-top: 5vh;
}

.collage_figure {
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.collage_figure img {
  max-width: 100%;
  height: auto;
}

.caption {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: smaller;
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
  .problem_with_img {
    flex-direction: column; /* stack image and description vertically */
  }

  .results {
    flex-direction: column; /* stack results vertically */
    align-items: center;
  }

  .results_text,
  .results_img {
    flex: 1 1 90%; /* wider on medium screens */
  }

  .tournament_imgs_container {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .ipt_problems {
    gap: 3vw;
    margin: 0 3vw;
  }

  .caption,
  .problem_description {
    font-size: 0.8rem;
  }

  .tournament h3 {
    font-size: smaller;
  }
}

@media (max-width: 480px) {
  .problem_with_img,
  .results {
    gap: 2vw;
  }

  .results_text,
  .results_img,
  .problem_description_container {
    width: 100%;
  }

  .collage_figure {
    width: 100%;
  }
}