Laravelのログイン画面をカスタマイズしたい

実現したいこと

ログイン画面に表示される。ロゴを変更したい。

発生している問題・分からないこと

ロゴの変更は、application-logo.blade.phpの内容を変更すれば良いとわかりました。
<img src="{{ asset('img/logo.png') }}" alt="" />に変更しました。
ただ、ロゴのサイズが大きいので、サイズを小さくしようと思い、guest.blade.phpの
<x-application-logo class="w-20 h-20 fill-current text-gray-500" />のところを
<x-application-logo class="w-10 h-10 fill-current text-gray-500" />に変更しました。
後に、npm run buildをしてから表示しても、サイズが変わりません。

imgタグのwidthとheightを50%に変更したところ、サイズは変わりましたが、中央寄せされていません。

ロゴのサイズを程よく調整して、中央寄せするにはどうすれば良いですか？

該当のソースコード

guest.blade.php
1<!DOCTYPE html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1">
6        <meta name="csrf-token" content="{{ csrf_token() }}">
7
8        <title>{{ config('app.name', 'Laravel') }}</title>
9
10        <!-- Fonts -->
11        <link rel="preconnect" href="https://fonts.bunny.net">
12        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
13
14        <!-- Scripts -->
15        @vite(['resources/css/app.css', 'resources/js/app.js'])
16    </head>
17    <body class="font-sans text-gray-900 antialiased">
18        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
19            <div>
20                <a href="/">
21                    <x-application-logo class="w-10 h-10 text-gray-500" />
22                </a>
23            </div>
24
25            <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
26                {{ $slot }}
27            </div>
28        </div>
29    </body>
30</html>