Getting Name of Array

[Adamhumbug]

I have a function that contains the following:

 

foreach ($data as $cards => $row) {
		print_r($data);

the data that is printed is as follows:

Array ( [cards] => {"Card 1": {"This": "Something 1", "Paragraph": "This is the first card", "Icon": 562, "Order": 5}, "Card 2": {"This": "Something 2", "Paragraph": "This is the second card", "Icon": "559", "Order": 2}, "Card 3": {"This": "Somethihg 3", "Paragraph": "This is the third card", "Icon": "560", "Order": 3}, "Card 4": {"This": "Something 4", "Paragraph": "This is the fourth card", "Icon": "561", "Order": 4}} )

I want to "get" "Card 1", "Card 2"...

 

How in a loop can i access this part of the array.  I have tried print_r $data, $cards and $row and none of them give me what i need.  When i try and use [0] i just get the first letter.

 

[Adamhumbug]

foreach ($data as $cards) {
		$cards = json_decode($data['cards'], true);
		$count = sizeof($cards);
		$out = '';
		if ($count == 4) {
			$size = "col-xl-3 col-md-6";
		} else if ($count == 3) {
			$size = "col-xl-4 col-md-4";
		} else if ($count == 2) {
			$size = "col-xl-6 col-md-6";
		} else if ($count == 1) {
			$size = "col-12";
		}
		foreach ($cards as $cardName => $cardDetails) {

			$icon_code = $icons[$cardDetails['Icon']];
			$out .= "<div class='$size mb-3'>
						<div class='card editHeroCard' data-card='$cardName'>
							<div class='card-body'>
								<div class='text-center card-title'>
									<i class='$icon_code fa-2xl'></i>
								</div>
								<div class='card-text text-center my-3 fw-bold'>$cardDetails[Name]</div>
								<div class='card-text text-center'>$cardDetails[Paragraph]</div>
							</div>
						</div>
						<div class='handle text-center'>GRAB</div>
					</div>";
		}