.promosi {
    display: block;
    background-color: #ffffff;
    
}

.promosi .related-articles-title {
    font-size: 0.9rem; /* Ukuran teks */
    font-weight: 400; /* Teks tebal */
    margin: 2rem 0rem 0.3rem; /* Jarak antara judul dan produk */
    color: #0096db; /* Warna teks */
    font-family: 'Poppins', sans-serif; /* Font konsisten */
    border-left: 1px solid orange;
    padding-left: 0.5rem;
}

.content-promosi {
    width: 100%; /* 75% dari lebar total .content */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
    margin: 0 auto;
    padding: 0;
}

.art5 {
    display: block; /* Pastikan block untuk grid */
    cursor: pointer;
    width: 100%; /* Menyesuaikan dengan kolom grid */
    max-width: 300px; /* Lebar maksimum untuk produk */
    height: auto;
    padding-bottom:5px;
    margin: 0 auto; /* Pusatkan jika tidak memenuhi lebar penuh */
    overflow: hidden;
    border: 1px solid #ccc;
    text-align: left;

    user-select: none;
    transition: box-shadow 0.3s;
    box-sizing: border-box; /* Padding dihitung dalam ukuran elemen */
}

.art5:hover {
    border: 1px dashed #00aeda;
}

.art5 h1 {
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.1;
    margin: 10px;
    overflow: hidden; /* Sembunyikan teks yang lebih dari batas */
    display: -webkit-box; /* Gunakan box model untuk mendukung clamp */
    -webkit-line-clamp: 3; /* Batasi teks maksimal 2 baris */
    -webkit-box-orient: vertical; /* Orientasi kotak menjadi vertikal */
    word-wrap: break-word; /* Memastikan kata panjang terpotong sesuai batas */
    line-height: 1.2; /* Sesuaikan tinggi baris jika diperlukan */
    max-width: 300px;
}

.art5 h1:hover {color:rgb(0, 198, 248)}

.category-promosi {
    margin: 10px;
    font-size: 0.7rem;
    color: rgb(0, 107, 194);
    letter-spacing: 1px;
}

.art5 img {
    max-width: 300px;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 3px;
    left:0;
}

.art5:hover img {
    filter: blur(1px); /* Menambahkan efek blur dengan kekuatan 5px */
    transition: filter 0.3s ease; /* Menambahkan animasi transisi */
}