.promo h1 {
    max-width: 780px;
    margin-bottom: 60px;
}
.page-box {
    .left {
        .search-box {
            margin-bottom: 10px;
            input {
                color: var(--text);
            }
            .text-h b {
                &:first-child::before {
                    color: var(--white);
                }
                &:last-child::before {
                    color: var(--2);
                }
            }
        }
        .checkbox {
            position: relative;
            padding: 10px 20px;
            background-color: var(--f6);
            color: var(--text);
            &::before,
            &::after {
                border-radius: 50%;
            }
            &:not(:last-child) {
                margin-bottom: 4px;
            }
            &:has(input:checked) {
                z-index: 1;
                box-shadow: 0 38px 15px 0 rgba(97, 0, 10, 0.03), 0 21px 13px 0 rgba(97, 0, 10, 0.10), 0 9px 9px 0 rgba(97, 0, 10, 0.17), 0 2px 5px 0 rgba(97, 0, 10, 0.2);
                background-color: var(--2);
                color: var(--white);
                &::before {
                    background: var(--white);
                }
                &::after {
                    background: var(--2);
                }
            }
        }
    }
    .events-list {
        .not-found {
            display: flex;
            height: 205px;
            justify-content: center;
            align-items: center;
            margin-bottom: 0px;
        }
        .list {
            display: flex;
            flex-direction: column;
            gap: 40px;
            container: list / inline-size;
        }
        .item {
            display: flex;
            gap: 20px;
            .image {
                flex: 1 0 43.244%;
            }
            .image {
                position: relative;
                span {
                    position: absolute;
                    top: 0;
                    right: 0;
                    padding: 10px;
                    font-size: 14px;
                    letter-spacing: 0.2px;
                    background: var(--2);
                    color: var(--white);
                    &.done {
                        background: var(--5);
                    }
                }
                img {
                    height: 100%;
                    object-fit: cover;
                }
            }
            .box {
                flex: 1 1 66%;
                display: flex;
                flex-direction: column;
            }
            .title {
                margin-bottom: 10px;
                font-size: 24px;
                font-weight: 600;
                line-height: 1;
                letter-spacing: 0.2px;
                transition: color .3s linear;
                a {
                    font-size: inherit;
                    font-weight: inherit;
                    line-height: inherit;
                    letter-spacing: inherit;
                    color: inherit;
                }
            }
            .info {
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                gap: 7px;
                padding: 10px;
                background: var(--f6);
                border: 1px solid hsla(347, 100%, 28%, 0);
                transition: border .3s linear, box-shadow .3s linear;
            }
            .text {
                margin-bottom: 3px;
                * {
                    letter-spacing: 0.2px;
                }
            }
            .date,
            .time,
            .format {
                padding-left: 26px;
                font-weight: 600;
                letter-spacing: 0.2px;
                background: linear-gradient(var(--2)) left 7px top 7px / 6px 6px no-repeat;
            }
            .format{
                margin-bottom: auto;
            }
            .red-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: fit-content;
                height: 32px;
                padding-inline: 20px;
                margin-top: 4px;
                b {
                    font-size: 14px;
                }
                &.done {
                    background: var(--5);
                }
            }
        }
    }
}
@media screen and (max-width: 1080px) {
    .promo-box {
        min-height: 0;
        padding: 100px 0px 70px;
        .breadcrumbs {
            margin-bottom: 27px;
        }
    }
}
@media screen and (max-width: 767px) {
    .promo h1 {
        margin-bottom: 0;
    }
    .promo-box {
        padding-top: 70px;
    }
}
@container list (max-width: 780px) {
    .page-box .events-list .item {
        display: flex;
        flex-direction: column;
        &:has(.image) {
            height: initial;
        }
        .image {
            min-height: 250px;
            max-height: 340px;
        }
        .box {
            flex: 0 0 auto;
        }
    }
}
@media (hover:hover) {
    .page-box .events-list .item:hover {
        .title {
            color: var(--2);
        }
        .info {
            border: 1px solid var(--2);
            box-shadow: 0 58px 23px 0 rgba(0, 0, 0, 0.01), 0 32px 19px 0 rgba(0, 0, 0, 0.05), 0 14px 14px 0 rgba(0, 0, 0, 0.09), 0 4px 8px 0 rgba(0, 0, 0, 0.10);
        }
    }
}