src/components/ModCard.tsx

@@ -50,7 +50,13 @@ export const ModCard = React.memo((props: ModDetails) => {
             src={props.featuredImageUrl}
             onError={handleModImageError}
             className='cMMPicture'
+            alt={`featured image for mod ${props.title}`}
           />
+          {props.nsfw && (
+            <div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW IBMSMSMBSSTagsTagNSFWCard'>
+              <p>NSFW</p>
+            </div>
+          )}
         </div>
         <div className='cMMBody'>
           <h3 className='cMMBodyTitle'>{props.title}</h3>

src/styles/cardMod.css

@@ -96,6 +96,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   font-size: 20px;
   line-height: 1.25;
   color: rgba(255, 255, 255, 0.75);
@@ -107,6 +108,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   color: rgba(255, 255, 255, 0.5);
   font-size: 15px;
   line-height: 1.5;
@@ -119,11 +121,12 @@
   justify-content: start;
   align-items: center;
   font-size: 14px;
-  background: rgba(255,255,255,0.05);
+  background: rgba(255, 255, 255, 0.05);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 1;
+  line-clamp: 1;
 }
 
 .cMMFootReactions {
@@ -148,5 +151,6 @@
   position: absolute;
   bottom: 10px;
   right: 10px;
+  -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
 }