.related-articles {
         margin-top: 40px;
         padding-top: 20px;
     }

     .related-articles h3 {
         font-size: 1.5em;
         margin-bottom: 10px;
         text-align: center;
     }

     .related-articles ul {
         list-style-type: none;
         padding-left: 20%;
         padding-right: 20%;
     }

     .related-articles li {
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 8px;
     }

     .related-articles a {
         text-decoration: none;
     }

     .related-articles a:hover {
         text-decoration: underline;
     }

     .related-articles ul {
         display: flex;
         gap: 16px;
         flex-wrap: wrap;
     }

     .related-articles li {
         text-align: center;
         background-color: rgba(155, 148, 140, .4);
         padding: 16px;
         border-radius: 8px;
         width: calc(33.333% - 16px);
         box-shadow: 15px 10px 10px #000000;
         transition: transform 0.3s ease;
     }

     .related-articles span {
         float: right;
         padding-top: 10%;
         margin-right: 10%;
     }

     .related-articles li:hover {
         transform: translateY(-5px);
     }

     .related-articles a {
         font-weight: bold;
         color: #ffffff;
     }

     .related-articles h3 {
         font-size: 1.5em;
         /* border-bottom: 1px solid;
         border-color: #ffffff; */
         padding-bottom: 6px;
         margin-bottom: 32px;
     }

     /*underline text in the span*/
     .related-articles span {
         position: relative;
         color: white;
         text-decoration: none;
     }

     .related-articles span::after {
         content: '';
         position: absolute;
         width: 0;
         height: 2px;
         bottom: -2px;
         left: 0;
         background-color: white;
         visibility: hidden;
         transition: all 0.6s ease-in-out;
     }

     .related-articles span:hover::after {
         visibility: visible;
         width: 100%;
     }