Displaying interlined transit routes on Mapbox or another map SDK?

Question

I am working on a project where I need to show transit routes for any given city. I am using the Mapbox GL library to render the maps, although I am not married to it. Using the Transitland tiles API, I'm able to render the city's transit routes, although it is far from perfect looking:

I've hidden the bus routes for clarity.

Is it possible, using Mapbox GL or another library to display "interlined" routes such as those in the Chicago loop as parallel, side-by-side lines at any zoom level? For reference, here is an example of the same area in Apple Maps:

If anyone has seen an example of this in use I could use as a reference, or if you know of a way it could be done, please let me know! Here is a snippet if you would like to recreate this map, just replace the keys at the beginning with your own:

const accessToken = MAPBOX_ACCESS_TOKEN;
const transitlandApiKey = TRANSITLAND_API_KEY;

map = new mapboxgl.Map({
  accessToken,
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v11',
  center: [-87.6250549, 41.8786351],
  zoom: 13,
})

map.on('style.load', () => {

  // Add Transitland source
  map.addSource('routes', {
    type: 'vector',
    tiles: [
      `https://transit.land/api/v2/tiles/routes/tiles/{z}/{x}/{y}.pbf?apikey=${transitlandApiKey}`
    ],
    maxzoom: 14
  })

  map.addLayer({
    id: 'routes',
    type: 'line',
    source: 'routes',
    'source-layer': 'routes',
    layout: {
      'line-cap': 'round',
      'line-join': 'round',
    },
    paint: {
      'line-width': 2.0,
      'line-color': [
        'match',
        ['get', 'route_type'],
        0, // Tram, streetcar, light rail
        ['coalesce', ['get', 'route_color'], 'blue'],
        1, // Subway, metro
        ['coalesce', ['get', 'route_color'], 'red'],
        2, // Rail
        'red', // amtrak
        3, // Bus
        ['coalesce', ['get', 'route_color'], 'lightblue'], // busses
        'grey' // default
      ],
      'line-opacity': [
        'match',
        ['get', 'route_type'],
        0, // Tram, streetcar, light rail
        1,
        1, // Subway, metro
        1,
        2, // Rail
        1,
        0
      ]
    }
  })
})

<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>

<div id="map" style="width: 500px; height: 400px;"></div>