.berita {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.berita-left {
    width: 65%;
    display: flex;
    flex-direction: column;
    padding: 50px 50px 100px 100px;
    gap: 25px;
}

.berita-item {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.berita-item-image {
    width: 300px;
    height: auto;
}

.berita-item-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
}

.berita-item-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.berita-right {
    width: 35%;
    display: flex;
    flex-direction: column;
    padding: 50px 100px 100px 0px;
    gap: 25px;
}

.berita-right-item {
    display: flex;
    flex-direction: column;
}

.berita-right-item-image img {
    width: 100%;
    max-width: 500px;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
}

.berita-right-item-content {
    padding: 20px 0px 0px 0px;
    display: flex;
    flex-direction: column;
}

.detail-berita {
    display: flex;
    flex-direction: row;
    padding: 0px 100px 100px 100px;
    gap: 50px;
}

.detail-berita-content {
    width: 70%;
    text-align: justify;
}

.detail-berita-content img {
    width: 100%;
    max-width: 1500px;
    margin-bottom: 30px;
    border-radius: 20px;
}

.berita-detail-right {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.berita-detail-right-item {
    display: flex;
    flex-direction: column;
}

.berita-detail-right-item-image img {
    width: 100%;
    max-width: 500px;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
}

.berita-detail-right-item-content {
    padding: 20px 0px 0px 0px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1024px) {
    .berita {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .berita-left {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 20px;
        gap: 25px;
    }

    .berita-item {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .berita-item-image {
        width: 100%;
        height: auto;
    }

    .berita-item-image img {
        width: 100%;
        object-fit: cover;
        border-radius: 15px;
    }

    .berita-item-content {
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 20px;
    }

    .berita-right {
        width: 100%;
        padding: 20px;
    }

    .berita-right h1 {
        font-size: 25px;
    }

    .detail-berita {
        display: flex;
        flex-direction: column;
        padding: 0px 20px 20px 20px;
        gap: 50px;
    }

    .detail-berita-content {
        width: 100%;
        text-align: justify;
    }

    .berita-detail-right {
        width: 100%;
    }

    .berita-detail-right-item {
        display: flex;
        flex-direction: column;
    }

    .berita-detail-right-item-image img {
        width: 100%;
        max-width: 500px;
        height: 250px;
        object-fit: cover;
        border-radius: 15px;
    }

    .berita-detail-right-item-content {
        padding: 20px 0px 0px 0px;
        display: flex;
        flex-direction: column;
    }


    /* Fix text overflow untuk berita */
.berita-item-content h3,
.berita-item-content p,
.berita-right-item-content h3,
.berita-right-item-content p,
.berita-detail-right-item-content h3,
.berita-detail-right-item-content p,
.detail-berita-content p,
.page-banner h1 {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Batasi lebar konten */
.berita-item-content,
.berita-right-item-content,
.berita-detail-right-item-content {
    max-width: 100%;
    overflow: hidden;
}
}