.headliner.headliner--1 > ul,
.headliner.headliner--2 > ul {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}

.headliner.headliner--1 > ul li:first-child,
.headliner.headliner--2 > ul li:first-child {
    grid-row: auto;
}

@media (min-width: 931px) {
    .headliner.headliner--2 > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.headliner.headliner--2 .headliner-item--big {
    min-height: 350px;
}

.headliner--editable {
    position: relative;
}

.headliner--0 {
    margin: 20px 0;
    padding: 12px;
    border: 1px dashed var(--border-color);
    border-radius: 16px;
}

.headliner-settings,
.headliner-replace {
    position: absolute;
    top: 12px;
    z-index: 2;
    padding: 8px 14px;
    min-height: 40px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
}

.headliner-settings {
    right: 12px;
    z-index: 3;
}

.headliner-replace {
    left: 12px;
}

.headliner--0 .headliner-settings {
    position: static;
}

@media (hover: hover) and (pointer: fine) {
    .headliner--editable:not(.headliner--0) .headliner-settings,
    .headliner-replace {
        opacity: 0;
        pointer-events: none;
    }

    .headliner--editable:not(.headliner--0):is(:hover, :focus-within) .headliner-settings,
    .headliner--editable .post-small:is(:hover, :focus-within) .headliner-replace {
        opacity: 1;
        pointer-events: auto;
    }
}

#homepage-selection-modal {
    margin: 0;
}

#homepage-selection-modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 600px;
    min-height: calc(100% - 2rem);
    margin: 1rem auto;
    display: flex;
    align-items: center;
}

#homepage-selection-modal .modal-content {
    position: relative;
    inset: auto;
    transform: none;
    max-height: calc(100dvh - 2rem);
    outline: none;
    padding: 0;
    color: var(--dark-color);
    background: var(--bg-cards);
}

#homepage-selection-modal .modal-header,
#homepage-selection-modal .modal-body,
#homepage-selection-modal .modal-footer {
    padding: 16px;
}

#homepage-selection-modal .modal-title {
    font-size: 1.25rem;
    line-height: 1.35;
    margin: 0;
}

#homepage-selection-modal .modal-header,
#homepage-selection-modal .modal-footer {
    border-color: var(--border-color);
}

#homepage-selection-modal [hidden] {
    display: none !important;
}

.homepage-selection-slots {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.homepage-selection-slots > li,
.homepage-selection-result {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--white-color);
}

.homepage-selection-name {
    margin: 2px 0 8px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.homepage-selection-actions,
.homepage-selection-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.homepage-selection-search-row {
    margin: 8px 0;
}

.homepage-selection-search-row .form-control {
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--dark-color);
    background: var(--white-color);
    border-color: var(--border-color);
}

.homepage-selection-result {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: var(--dark-color);
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.homepage-selection-result:is(:hover, :focus-visible) {
    border-color: var(--blue-color);
}

#homepage-selection-modal [data-homepage-error] {
    margin: 12px 0 0;
}

[data-theme="dark"] #homepage-selection-modal .btn-close {
    filter: invert(1);
}

.homepage-pins-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.homepage-pins-trigger,
.homepage-feed-pin-button,
.homepage-pins-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--dark-color);
    cursor: pointer;
}

.homepage-pins-trigger {
    padding: 6px 10px;
    background: var(--bg-cards);
    font-weight: 600;
}

.homepage-pins-count,
.homepage-pins-position {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 26px;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--bg-grey-color);
    font-size: .85rem;
    font-weight: 600;
}

.homepage-pin-icon {
    display: inline-block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8l-1 6 3 3v2H6v-2l3-3-1-6ZM12 15v6'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(35deg);
}

.homepage-feed-pin-button {
    min-width: 36px;
    padding: 4px 6px;
    background: transparent;
    color: var(--grey-color);
}

.homepage-feed-pin-button.is-pinned {
    padding-inline: 8px;
    background: var(--bg-cards);
    color: var(--dark-color);
}

.homepage-feed-pinned-label {
    font-size: .8rem;
    font-weight: 600;
}

.homepage-pins-trigger:hover,
.homepage-feed-pin-button:hover,
.homepage-pins-arrow:not(:disabled):hover {
    border-color: var(--blue-color);
}

.homepage-pins-hint,
.homepage-pins-empty,
.homepage-pins-bottom > span,
.homepage-pins-article small {
    color: var(--grey-color);
}

.homepage-pins-hint {
    margin-block: 8px;
}

.homepage-pins-list > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px 10px;
}

.homepage-pins-article .homepage-selection-name {
    margin: 2px 0;
}

.homepage-pins-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.homepage-pins-arrow,
.homepage-pins-remove {
    min-width: 36px;
    min-height: 36px;
    padding: 4px 10px;
    background: var(--bg-grey-color);
}

.homepage-pins-arrow:disabled,
[data-homepage-pins] button:disabled,
.homepage-selection-result:disabled {
    opacity: .5;
    cursor: default;
}

.homepage-pins-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 479px) {
    .homepage-feed-pinned-label {
        display: none;
    }
}