.timeline-item {
    @include usevar(background-color, card-background);
    @include usevar(--fade-color, card-background);
    @include usevar(color, main-color);

    .avatar-icon {
        border: 2px solid;
        @include usevar(border-color, theme-color);

        &.big {
            width: 3rem;
            height: 3rem;

            @media #{$breakpoint-not-small} {
                width: px2rem(62px);
                height: px2rem(62px);
            }
        }
    }

    .timeline-content-box {
        @include usevar(background-color, timeline-content-background);

        > * {
            display: block;
            max-width: 100%;
            max-height: 80vh;
        }
    
        &.embed {
            @extend .aspect-ratio, .aspect-ratio--16x9;
    
            > iframe {
                @extend .aspect-ratio--object;
            }
        }
    }
}

.timeline-modal {
    .container {
        max-height: 100vh;
        
        @media #{$breakpoint-not-small} {
            width: auto;
            max-height: calc(100vh - 2rem);
        }
    }
}