.photo-block
{
    @apply mb-16;

    .wrapper
    {
        @apply grid;
        @apply gap-4;

        .column
        {
            @apply grid;
            @apply grid-cols-1 lg:grid-cols-2;
            @apply gap-4;

            .item-1
            {
                @apply relative;

                .paragraph
                {
                    @apply absolute;
                    @apply bottom-6 md:bottom-12;
                    @apply bg-black;
                    @apply text-white;
                    @apply px-6;
                    @apply py-6 md:py-8;
                    @apply w-2/3;

                    p
                    {
                        @apply m-0;
                    }
                }
            }

            .wrap-three
            {
                @apply grid;
                @apply grid-cols-2;
                @apply grid-rows-none;
                @apply gap-4;

                grid-template-rows: auto;
                grid-template-areas:
                "item-2 ."
                "item-3 item-4";

                .item-2
                {
                    grid-area: item-2;
                }
                .item-3
                {
                    grid-area: item-3;
                }
                .item-4
                {
                    grid-area: item-4;
                }                
            }

            .wrap-two
            {
                @apply grid;
                @apply grid-cols-2;
                @apply grid-rows-none;
                @apply gap-4;

                grid-template-rows: auto;
                grid-template-areas:
                "arrow item-5";

                .arrow
                {
                    grid-area: arrow;

                    img
                    {
                        @apply h-24 md:h-48;
                        @apply -mt-4;
                        @apply ml-auto;
                        @apply mr-auto;
                    }
                }
                .item-5
                {
                    grid-area: item-5;
                }             
            }

            .picture
            {
                @apply h-full;

                img
                {
                    @apply w-full;
                    @apply h-full;
                    object-fit: cover;
                }
            }
        }
    }

}