Help with Undefined variable error (laravel 8 from scratch)

Hello, I am following along the tutorial for laravel 8 from scratch and have run into a problem I can figure out.

In Episode 32 we are taking a layout that has been made by Jeffrey and are cutting it up into component & making them dynamic. The video jumps at the point he is getting the second component set up, and then when he fast forwards, his example is working fine. This is to save time on the repetition on the video. I did as he said and repeated the steps done on the post-card-feature component and I am getting an undefined variable error. I cannot work out why.

I have the following code in my main posts blade view

            <x-post-card-feature :post="$posts[0]"/>

            <div class="lg:grid lg:grid-cols-2">
                @foreach ($posts->skip(1) as $post)
                    <x-post-card-grid :post="$post"/>
                @endforeach
            </div>

Then a snippet of code from the two components are the following:

post-card-feature.blade.php - this works fine

@props(['post'])
<article
    class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl">
    <div class="py-6 px-5 lg:flex">
        <div class="flex-1 lg:mr-8">
            {{-- TODO: Add image --}}
            <img src="../images/illustration-1.png" alt="Blog Post illustration" class="rounded-xl">
        </div>

        <div class="flex-1 flex flex-col justify-between">
            <header class="mt-8 lg:mt-0">
                <div class="space-x-2">
                    <a href="{{ route('category', $post->category->slug) }}"
                       class="px-3 py-1 border border-blue-300 rounded-full text-blue-300 text-xs uppercase font-semibold"
                       style="font-size: 10px">{{ $post->category->name }}</a>

post-card-grid.blade.php - this component is throwing the error

@props(['post'])
<article
    class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl">
    <div class="py-6 px-5">
        <div>
            {{-- TODO: Add image --}}
            <img src="../images/illustration-1.png" alt="Blog Post illustration" class="rounded-xl">
        </div>

        <div class="mt-8 flex flex-col justify-between">
            <header>
                <div class="space-x-2">
                    <a href="{{ route('category', $post->category->slug) }}"
                       class="px-3 py-1 border border-blue-300 rounded-full text-blue-300 text-xs uppercase font-semibold"
                       style="font-size: 10px">{{ $post->category->name }}</a>
                </div>

The second component (post-card-grid.blade.php) is the part that is giving me an error, it is saying

Undefined variable $post

Please help