اهلا, اريد منك تحسين هدا الكود البرمجي وجعله افضل شكلا بتحسين css الخاص به, <!DOCTYPE html>
<html>


<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<style>

h1 {
    color: red;
    font-size: 25px;
    font-family: system-ui;
}

h2 a {font-family: system-ui;
    background: #000000;
    padding: 4px;
    border-radius: 15px;
    border: 1px solid white;
    color: red;
    font-size: 18px;
    position: absolute;
    right: 5px;
    top: 15px;
}

article#post-1208 .item movies {
    max-height: 135px;
    overflow: hidden;
}

img {
    width: 124px;
    height: 185px;
}

i.fas.fa-star {
    position: relative;
    top: -2px;
    color: rgb(255, 0, 0);
    font-size: 8px;
}



.data {
    max-width: 900px;
    height: 900px;
    background: linear-gradient( 230deg
 , rgb(7 7 7 / 10%), rgb(7 7 7));
    position: relative;
    top: -58px;
    overflow: hidden;
}


a {
    position: relative;
    font-family: m,Verdana;
    color: black;
    font-size: 13px;
    text-decoration: none;
    top: -23px;
}

span {
    position: relative;
    color: #000;
    font-family: system-ui;
    font-size: 11px;
    top: -50px;
}

div.scrollmenu article {
width:110px;
height: 180px;
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
overflow: hidden;
border:3px solid #000;
border-radius:9px;}
</style>
</head>
<body style="background-color:#ffffff;">

<center>
<div class="scrollmenu">
<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://k.top4top.io/p_3188scsh51.jpg" alt="Mortal Kombat">
<div class="rating"> AR  </div>
<div class="mepo"></div>
<a href="go:bein"><div class="see"></div></a></div>
<div class="data"><h3><a href="go:bein">BEIN SPORTS</a></h3>
<span>  </span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://l.top4top.io/p_3188mzax12.jpg" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">BEIN XTRA</a></h3>
<span></span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://a.top4top.io/p_31889z0nc3.jpg" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">BEIN MAX</a></h3>
<span></span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://b.top4top.io/p_318801fqy4.jpg" alt="Mortal Kombat">
<div class="rating">EN<i class=" "></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">SSC SPORTS</a></h3>
<span></span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://c.top4top.io/p_3188nar1e5.jpg" alt="Mortal Kombat">
<div class="rating">BEM<i class="BM"></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h5><a href="#">ON SPORT</a></h5>
<span></span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://d.top4top.io/p_3188tjos36.jpg" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">ALKASS</a></h3>
<span></span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://e.top4top.io/p_31889ivo67.jpg" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">ABU DHABI</a></h3>
<span></span></div></article>





<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://e.top4top.io/p_2284ez5py1.png" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">SHAHID</a></h3>
<span></span></div></article>






<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://k.top4top.io/p_2284flr6u1.png" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">EGYPT</a></h3>
<span></span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://j.top4top.io/p_2286jhksk1.png" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">SAUDI</a></h3>
<span></span></div></article>


<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://j.top4top.io/p_2284r5tch1.png" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">MOROCCO</a></h3>
<span></span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://e.top4top.io/p_2284gmaz62.png" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">UAE</a></h3>
<span></span></div></article>

<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://k.top4top.io/p_22848ng4w1.png" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">TUNISIA</a></h3>
<span></span></div></article>


<a href='go:p1'><article id="post-1208" class="item movies">
<div class="poster">
<img src="https://d.top4top.io/p_22842x35v1.png" alt="Mortal Kombat">
<div class="rating">AR<i class=""></i> </div>
<div class="mepo"></div>
<a href="#"><div class="see"></div></a></div>
<div class="data"><h3><a href="#">ALGERIA</a></h3>
<span></span></div></article>




</div>
</center>
</body>
</html>