Slick.jsにてスライドショーを実装したいのですが、２点思い通りに実装されない点があります。

前提・実現したいこと

①矢印を右のみ（黒色で）反映させたいのですが、矢印が反映されません。
②画像を押したら別リンクページに飛ぶようにしたく、指定していて該当ページに飛ぶことはできるのですが、
画像と画像の間に余白がページ上ではみられますが、カーソルを合わせると境目がなく、
画像と画像の間の余白にカーソルを合わせてもポインターが出てきてしまいます。

画像のみ（アンカーの指定範囲が画像の大きさ）に指定することは可能でしょうか。

大変申し訳ございませんが、わかる方ご教示願います。

該当のソースコード

html
1<h2 class="blog-title fade-in-bottom flex font-title animate" id="blog">
2      BLOG
3  </h2>
4  <div class="blog-inner flex">
5      <div class="blog-inner-items flex">
6          <div class="slider-blog flex">
7              <div class="blog-article flex">
8                  <a href="article_1.html"><img src="img/記事1.jpg" alt="見やすいサイト条件" /></a>
9                  <h3 class="articles-title flex">見やすいサイト条件</h3>
10                  <div class="articles-time flex">2021/02/10 14:10</div>
11              </div>
12              <div class="blog-article flex">
13                  <a href="article_2.html"><img src="img/記事2.jpg" alt="最近いいなと思ったサイト" /></a>
14                  <h3 class="articles-title flex">最近いいなと思ったサイト</h3>
15                  <div class="articles-time flex">2021/02/11 18:20</div>
16              </div>
17              <div class="blog-article flex">
18                  <a href="article_3.html"><img src="img/記事3.jpg" alt="カメラの選び方" /></a>
19                  <h3 class="articles-title flex">カメラの選び方</h3>
20                  <div class="articles-time flex">2021/02/13 18:10</div>
21              </div>
22          </div>
23          <div class="blog-font font-title">
24              - BLOG一覧 - <a href="blog.html"><i class="blog-arrow fas fa-chevron-right"></i></a>
25          </div>
26      </div>
27  </div>

css
1h2#blog {
2  padding-top: 12rem;
3  margin-top: -8rem;
4}
5
6.blog-inner {
7  width: 100%;
8  -webkit-box-orient: vertical;
9  -webkit-box-direction: normal;
10  -webkit-flex-direction: column;
11      -ms-flex-direction: column;
12          flex-direction: column;
13}
14
15.blog-inner .blog-inner-items {
16  width: 100%;
17  margin-top: 8rem;
18  -webkit-box-orient: vertical;
19  -webkit-box-direction: normal;
20  -webkit-flex-direction: column;
21      -ms-flex-direction: column;
22          flex-direction: column;
23}
24
25.blog-inner .blog-inner-items .slider-blog .blog-article {
26  -webkit-box-orient: vertical;
27  -webkit-box-direction: normal;
28  -webkit-flex-direction: column;
29      -ms-flex-direction: column;
30          flex-direction: column;
31}
32
33.blog-inner .blog-inner-items .slider-blog .blog-article a img {
34  width: 350px;
35  height: 250px;
36  margin: 0 auto;
37  margin: 1rem;
38}
39
40.blog-inner .blog-inner-items .slider-blog .blog-article .articles-title {
41  font-size: 1rem;
42  padding: 1rem;
43  margin: 0 auto;
44}
45
46.blog-inner .blog-inner-items .slider-blog .blog-article .articles-time {
47  font-size: 0.8rem;
48  margin: 0 auto;
49}
50
51.blog-inner .blog-inner-items .blog-font {
52  margin-top: 4rem;
53  font-size: 1.5rem;
54  color: black;
55}
56
57.blog-inner .blog-inner-items .blog-font a i {
58  -webkit-transition-duration: 0.4s;
59          transition-duration: 0.4s;
60  padding: 2rem;
61}
62
63.blog-inner .blog-inner-items .blog-font i:hover {
64  -webkit-transform: translateX(20px);
65          transform: translateX(20px);
66}
67
68.blog-inner .blog-inner-items .blog-font .blog-arrow {
69  color: black;
70  padding: 1rem;
71}
72
73/* <====== slick-blog ======> */
74.blog-inner .blog-inner-items .slick-arrow {
75  cursor: pointer;
76}
77
78.blog-inner .blog-inner-items .next-arrow {
79  color: black;
80}
81

js
1$(".slider-blog").slick({
2  infinite: true,
3  arrow: true,
4  slidesToShow: 3,
5  slidesToScroll: 1,
6  nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
7  responsive: [
8    {
9      breakpoint: 1024,
10      settings: {
11        infinite: true,
12        arrow: true,
13        slidesToShow: 2,
14        slidesToScroll: 1,
15        nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
16      },
17    },
18  ],
19});