.newsletter-slider {
    position: relative;
}

.newsletter-list {
    list-style-type: none;
	margin-top: var(--margin);
}

.newsletter-list > .group {
    display: none;
}

.newsletter-list > .group.is-active {
    display: block;
}

.newsletter-list input {
    display: none;
}

.newsletter-list input.more + label,
.newsletter-list label[for="all"] {
    display: block;
    cursor: pointer;
}

.newsletter-list input.more + label {
    margin-top: var(--margin-d2);
}

.newsletter-list input:checked + label,
.newsletter-list input.more:checked + label,
.newsletter-list input:checked + label + label[for="all"] {
    display: none;
}

.newsletter-list:has(input.all:checked) > .group {
    display: block;
}

.newsletter-list:has(input.all:checked) input.more + label {
    display: none;
}

.newsletter-list:has(input.all:checked) label[for="all"] {
    display: none;
}

.newsletter-list > .group:has(input.more:checked) + .group {
    display: block;
}

.newsletter-list .list_item > a {
    display: flex;
}

.newsletter-thumb {
    display: flex;
    column-gap: 0.1em;
    height: var(--fontsize-regular);
    margin-right: var(--margin-d2);
    background-color: rgba(0, 0, 0, 0.1);
    width: var(--margin-x2);
}

.newsletter-thumb > picture {
    width: 100%;
}

.newsletter-thumb > picture > img {
    object-fit: cover;
    height: 100%;
}

.newsletter-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 96%;
}

.newsletter-title > span:first-child {
    display: none;
}

@media (min-width: 768px) and (hover: hover) {
    .newsletter-list {
        transition: opacity 0.3s ease-in-out;
    }

    .newsletter-list:hover .list_item {
        opacity: var(--opacity);
    }

    .newsletter-list .list_item {
        transition: opacity 0.15s ease-in-out;
    }

    .newsletter-list:hover .list_item:hover {
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .newsletter-list {
        padding-right: var(--margin);
		margin-top: var(--margin-x2);
    }

    .newsletter-list input.more + label,
    .newsletter-list label[for="all"] {
        display: inline-block;
        margin-right: var(--margin-d2);
    }

    .newsletter-title > span:first-child {
        display: inline;
    }
}
