feat: more responsiveness

Author: epiqueras

index.html

@@ -175,25 +175,25 @@ <h4 class="Solution-text col-12 col-sm-8">Kleros connects users who need to solv
     <h2 class="col-12">How Does Kleros Work?</h2>
     <div class="col-12">
       <div class="HowKlerosWorks-steps row">
-        <div class="HowKlerosWorks-step col-12 col-md-6 my-4">
+        <div class="HowKlerosWorks-step col-12 col-lg-6 my-4">
           <div class="HowKlerosWorks-number">1</div>
           <img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/contract.svg" alt="Contract">
           <h3 class="HowKlerosWorks-title">Contract</h3>
           <h4 class="HowKlerosWorks-description">The relevant information is securely sent to Kleros.</h4>
         </div>
-        <div class="HowKlerosWorks-step col-12 col-md-6 my-4">
+        <div class="HowKlerosWorks-step col-12 col-lg-6 my-4">
           <div class="HowKlerosWorks-number">2</div>
           <img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/dispute.svg" alt="Dispute">
           <h3 class="HowKlerosWorks-title">Dispute</h3>
           <h4 class="HowKlerosWorks-description">The relevant information is securely sent to Kleros.</h4>
         </div>
-        <div class="HowKlerosWorks-step col-12 col-md-6 my-4">
+        <div class="HowKlerosWorks-step col-12 col-lg-6 my-4">
           <div class="HowKlerosWorks-number">3</div>
           <img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/selection.svg" alt="Selection">
           <h3 class="HowKlerosWorks-title">Selection</h3>
           <h4 class="HowKlerosWorks-description">A tribunal is drawn from the crowd. Jurors evaluate evidence and cast their vote.</h4>
         </div>
-        <div class="HowKlerosWorks-step col-12 col-md-6 my-4">
+        <div class="HowKlerosWorks-step col-12 col-lg-6 my-4">
           <div class="HowKlerosWorks-number">4</div>
           <img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/enforcement.svg" alt="Enforcement">
           <h3 class="HowKlerosWorks-title">Enforcement</h3>

style.css

@@ -412,7 +412,7 @@ p {
   padding: 0 10%;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .HowKlerosWorks-step:nth-child(even) {
     margin-top: 186px !important;
   }