:root {
    --card-color: #161326;

    /* Transisi */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;

    /* CKeditor */
    --ck-image-style-spacing: 1.5em;
}

a {
    text-decoration: none;
}
.thumbnail {
    aspect-ratio: 21/9;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
}
.thumbnail img {
    width: 100%;
    height: 100%;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.news .navbar {
    background-color: transparent;
}
.news #nav-news.active {
    background-color: var(--card-color);
    transition: var(--tran-03);
}
.news .navbar .container a {
    position: fixed;
}
.news .navbar .container .title {
    opacity: 0;
}
.news .navbar .container .title.active {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-left: 35px;
    opacity: 1;
    transition: var(--tran-03);
}

.news .thumbnail {
    width: 100%;
    aspect-ratio: 16/6;
    border-radius: 0px;
}
.news .thumbnail img {
    width: 100%;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}
@media (min-width: 768px) {
    .news .thumbnail {
        aspect-ratio: 16/4 !important;
    }
    .body .news-content p {
        line-height: 25px !important;
    }
}

#news-content > p {
    color: var(--text-color);
}

.news-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#nav-title .news-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* CKEditor */
figure.image {
    margin-left: auto;
    margin-right: auto;
}
figure.image img,
p>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
figure.image.image-style-align-left,
p>.image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
}
figure.image.image-style-align-right,
p>.image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}
figure.image.image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}
figure.image.image-style-block-align-right {
    margin-right: 0;
    margin-left: auto;
}
figure.table table {
    all: revert;
    border-collapse: collapse;
    width: 100%;
}
pre {
    background-color: #eeefef;
    border: 1px solid var(--text-color);
    padding: 20px;
    border-radius: var(--radius-5);
}
label.language-code {
    padding: 5px 15px;
    position: absolute;
    right: 0;
    border-radius: 0px 5px 0px 0px;
}
@media (max-width: 768px) {
    .news .container figure,
    .news .container p img {
        width: 100% !important;
    }
}