.title h1 {
     color: var(--color-4);
     font-size: var(--font30);
 }

 .btn-blog .image-blog::after {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     background-color: #0000002c;
     z-index: 1;
     border-radius: 20px;
 }

 .blogs .btn-blog .image-blog {
     border-radius: 20px;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, .4);
 }


 .btn-blog .text-blog .title {
     color: var(--color-5);
     font-size: var(--font16);
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }


 .btn-blog .text-blog .text {
     color: var(--color-5);
     font-size: var(--font16);
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     font-size: var(--font14);
 }

 .btn-blog .image-blog img {
     border-radius: 20px;
 }

 .btn-blog .date p {
     font-size: var(--font14);
     color: #dddddd;
 }

 .btn-blog .title h2 {
     color: var(--color-5);
     font-size: var(--font30);

 }

 .btn-blog .date {
     padding: 10px;
 }

 .btn-blog .date p {
     color: white;
     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.50);
     background: rgba(0, 0, 0, 0.00);
     padding: 5px 10px 2.5px 10px;
     border-radius: 10px;
     border: 1px solid rgba(250, 250, 250, .3);
     font-size: 12px;
 }

 .btn-blog {
     border: 1px solid #ddd;
     flex-direction: column;
     padding: 7px;
     border-radius: 24px;
     transition: 0.5s;
     display: flex;
     justify-content: space-between;
     height: 100%;
 }

 .btn-blog:hover {
     border: 1px solid var(--color-4);
 }