title: I have an issue with my logic in this SASS for loop using two lists.... the error I'm getting says "index out of bounds for `nth($list, $n)`"
body: <p>Here's my code:</p>
  <pre><code>$responsive-adjust-amounts: (
  2.5, //phone
  2,   //tablet
  1.5, //laptop
  1.25 //desktop
  );
  
  $responsive-devices: (&quot;#{$phone}&quot;, &quot;#{$tablet}&quot;, &quot;#{$laptop}&quot;, &quot;#{$desktop}&quot;);
  
  @each $device in $responsive-devices {
      @media #{$device} {
          @for $i from 1 through length($responsive-adjust-amounts) {
              @media #{$device} {
                  #{nth($responsive-adjust-amounts, $i)} {
                      @include font-adjustments(nth($responsive-adjust-amounts, $i));
                  }
              }
              $i: $i + 1;
          }
      }
  }
  </code></pre>
  <p>Ultimately, I'm wanting it to create this end result:</p>
  <pre><code>@media #{$phone} {
      @include font-adjustments(nth($responsive-adjust-amounts, 1));
  }
  
  @media #{$tablet} {
      @include font-adjustments(nth($responsive-adjust-amounts, 2));
  }
  
  @media #{$laptop} {
      @include font-adjustments(nth($responsive-adjust-amounts, 3));
  }
  
  @media #{$desktop} {
      @include font-adjustments(nth($responsive-adjust-amounts, 4));
  }
  </code></pre>
  <p>Could anyone provide any assistance where I'm getting stuck? Thank you in advance!</p>