.custom-article__title,
.custom-article__info,
.custom-article__content,
.custom-article__share,
.custom-article__back-button,
.custom-article__comment,
.custom-article__cover-image {
    display: block;
}


.custom-article__cover-image {
    display: block;
    width: 100vw !important;
    height: var(--custom-article-cover-desktop-h, 450px) !important;
    overflow: hidden;
}

@media (max-width: 959px) {
    .custom-article__cover-image {
        height: var(--custom-article-cover-mobile-h, 240px) !important;
    }
}

.custom-article__back-button svg {
    width: 0.8em;
    height: 0.8em;
    transform: rotate(90deg);
}

.custom-article__back-link {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.custom-article__comment-title {
    padding-block: 0 16px;
}

.custom-article__comment-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-block-end: 24px;
}

.custom-article__comment-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.custom-article__comment-info {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
}

.custom-article__comment-dot {
    width: 4px;
    height: 4px;
    background-color: currentcolor;
    border-radius: 50%;
}

.custom-article__comment-fields {
    display: flex;
    gap: 20px;
}

.custom-article__comment-form {
    padding-block-start: 32px;
}

.custom-article__comment-form-title {
    margin-block-end: 24px;
}

.custom-article__comment-submit {
    display: flex;
    justify-content: center;
    margin-block-start: 24px;
}

.custom-article__comment-tip {
    padding-block: 24px;
}

.custom-article__comment .text-area+.field__label {
    inset-block-start: 20px;
}

.custom-article__comment .field__info {
    padding-block-end: 24px;
}

.custom-article__nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--nav-column-gap, 16px);
}

.custom-article__nav a{
    color: #824063;
}

.custom-article__nav svg,
.custom-article__nav path {
    fill: #824063;
}

.custom-article__nav-prev {
    grid-column: 1;
    justify-self: start;
}

.custom-article__nav-back {
    grid-column: 2;
    justify-self: center;
}

.custom-article__nav-next {
    grid-column: 3;
    justify-self: end;
}

.custom-article__nav-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
    min-width: 0;
}

.custom-article__nav-item:hover {
    opacity: 0.7;
}

.custom-article__nav-item[hidden] {
    display: none;
}

.custom-article__nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--nav-icon-size, 16px);
    height: var(--nav-icon-size, 16px);
}

.custom-article__nav-icon svg,
.custom-article__nav-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.custom-article__nav-icon.is-rotated {
    transform: rotate(180deg);
}

.custom-article__nav-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30ch;
}

@media (max-width: 959px) {
    .custom-article__comment-fields {
        display: block;
    }

    .custom-article__comment-item {
        gap: 16px;
        padding: 16px;
    }

    .custom-article__nav-text {
        max-width: 100%;
    }
}