merhaba pc de 4 lü mobilde 1 yazı gözükecek şekilde nası ayarlarım

import React from 'react';
import Slider from 'react-slick';
import blog_photo from '../upload/blog/online-psikolog.jpg';

function Blog() {
  const blogPosts = [
    {
      id: 1,
      title: 'Online Terapi Nedir ve Kimler İçin Uygundur?',
      photo: blog_photo,
      url: 'blog/online-terapi-nedir-ve-kimler-icin-uygundur',
    },
    {
      id: 2,
      title: 'Online Terapi Nedir ve Kimler İçin Uygundur?',
      photo: blog_photo,
      url: 'blog/online-terapi-nedir-ve-kimler-icin-uygundur',
    },
    {
      id: 3,
      title: 'Online Terapi Nedir ve Kimler İçin Uygundur?',
      photo: blog_photo,
      url: 'blog/online-terapi-nedir-ve-kimler-icin-uygundur',
    },
    {
      id: 4,
      title: 'Online Terapi Nedir ve Kimler İçin Uygundur?',
      photo: blog_photo,
      url: 'blog/online-terapi-nedir-ve-kimler-icin-uygundur',
    },
     {
      id: 5,
      title: 'Online Terapi Nedir ve Kimler İçin Uygundur?',
      photo: blog_photo,
      url: 'blog/online-terapi-nedir-ve-kimler-icin-uygundur',
    },
     {
      id: 6,
      title: 'Online Terapi Nedir ve Kimler İçin Uygundur?',
      photo: blog_photo,
      url: 'blog/online-terapi-nedir-ve-kimler-icin-uygundur',
    },
     {
      id: 7,
      title: 'Online Terapi Nedir ve Kimler İçin Uygundur?',
      photo: blog_photo,
      url: 'blog/online-terapi-nedir-ve-kimler-icin-uygundur',
    },
     {
      id: 8,
      title: 'Online Terapi Nedir ve Kimler İçin Uygundur?',
      photo: blog_photo,
      url: 'blog/online-terapi-nedir-ve-kimler-icin-uygundur',
    },
  ];

 const settings = {
  slidesToScroll: 1,
  slidesToShow: 4,
  arrows: true,
  dots: false,
  infinite: true,
  speed: 500,
  slidesPerRow: 1, 
  rows: 1,
};

  return (
    <div className="section-mb80 browse">
      <div className="browse__center center">
        <div className="browse__inner">
          <div className="browse__head browse__head_small">
            <h2 className="browse__title h4">Blog Yazıları</h2>
          </div>
          <div className="browse__wrapper" >
            <Slider {...settings} style={{margin: '0 auto' }}>
              {blogPosts.map((post) => (
                <div className="browse__card" key={post.id}>
                  <a className="browse__link" href={post.url}>
                    <div className="browse__preview">
                      <img src={post.photo} alt={post.title} />
                    </div>
                    <div className="browse__subtitle">{post.title}</div>
                    <div className="browse__content"></div>
                  </a>
                </div>
              ))}
            </Slider>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Blog;