/* CHAPITRES, PROBLEMES, TEST VIRTUELS, CONCOURS */

/* Note: We use 12 columns for screens with a width < 768px, and 24 columns for larger screens (to have more flexibility)
   The reason why we don't use 24 columns for small screens is because the number of columns and the gap size seem to have
   an impact on the minimal width of the grid. Using 24 columns with a gap of 15px gives a minimal width that is too large. */

/* Note: .problem is used for problems and contestproblems */

.chapter, .problem, .virtualtest, .contest {
  h4 {
    margin: 5px;
  }
  
  .real-content {
    padding:15px !important;
  }

  .intro {
    text-align:justify;
    padding-left:5px;
    padding-right:5px;
  }

  .module {
    padding-top:8px;
  }
  
  .content {
    --bs-columns: 12;
    --bs-gap: 15px;
  }
}

@media (min-width: map-get($grid-breakpoints, 'md')) { // 768px
  .chapter, .problem, .virtualtest, .contest {
    .content {
      --bs-columns: 24;
    }
  }
}

.problem, .virtualtest {
  .left-part {
    padding-left:15px;
    padding-right:15px;
    padding-bottom:10px;
  }

  .right-part {
    text-align:center;
    padding-bottom:10px;
  }
  
  .clock-part {
    text-align:center;
    padding-left:20px;
    padding-right:20px;
    padding-top:7px;
    padding-bottom:7px;
  }
}

.virtualtest, .contest {
  .left-info {
    text-align:center;
    padding-bottom:10px;
  }

  .right-info {
    text-align:center;
    padding-bottom:10px;
  }
}

.problem {
  .bottom-part {
    padding-left:15px;
    padding-right:5px;
    padding-top:7px;
    padding-bottom:7px;
  }
}

.virtualtest {
  .bottom-part {
    text-align:center;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
  }
}

.contest {
  .bottom-part {
    text-align:left;
    padding-left:15px;
    padding-right:5px;
    padding-top:7px;
    padding-bottom:7px;
  }
}
