/* banner */

.top-section .banner, .top-section .banner img{
    width: 100%;
    border-radius: var(--border-rd);
}
.desktop-banner{
    display: none;
}

/* main info */

.main-info{
    margin-bottom: var(--marg3x);
}

/* tabs */

.tab-button h1, .tab-button h2 {
    font-size: var(--type-big);
    margin: 0;
}
.tab-button:not(.live) h1, .tab-button:not(.live) h2{
    opacity: .25;
}
.tab-button:not(.active) h1, .tab-button:not(.active) h2 {
    font-family: Favorite;
}

/* blocks */

.movie-block.intro:not(:first-of-type){
    margin-top: var(--marg3x);
}
.tab-content-wrapper:not(.live) .movie-block.intro{
    opacity: .25;
}

.movie-block .schedule-summary{
    padding: var(--marg2x);
    background: var(--color-accent);
    margin-top: var(--margin);
    border-radius: var(--border-rd);
}
.movie-block .schedule-summary ul{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: calc( var(--margin) * -1);
}
.movie-block .schedule-summary li{
    display: flex;
    flex-direction: column;
    margin-bottom: var(--margin);
}
.movie-block .schedule-summary .title{
    font-weight: bold;
    order: 2;
}
.movie-block .schedule-summary a{
    color: var(--color-text);
}
.movie-block .schedule-summary .artist{
    order: 3;
}
.movie-block .schedule-summary .more-info{
    font-size: var(--type-small);
    text-transform: uppercase;
    order: 1;
    color: var(--color-background);
}

/* items */

.tab-content-element:not(.live){
    background: none;
}

.tab-content-wrapper:not(.live) .tab-content-element h1,
.tab-content-wrapper:not(.live) .tab-content-element h2,
.tab-content-wrapper:not(.live) .tab-content-element img,
.tab-content-wrapper:not(.live) .tab-content-element span{
    opacity: .25;
}
.live .tab-content-element:hover{
    animation: wiggle .4s 1;
    cursor: pointer;
}
.tab-content-element h1{
    padding-right: 2em;
}
.tab-content-element .infolink{    
    display: block;
    position: absolute;
    right: var(--marginhalf);
    top: var(--marginhalf);
    z-index: 3;
    padding: var(--marginhalf);
}
.tab-content-element .infolink .arrowup{    
    position: relative;
    right: 0;
    top: 0;
}
.tab-content-element img{
    pointer-events: none;
}



/* ######## */

/* bigger */

@media only screen and (min-width: 600px) {
    
    /* banner */

    .mobile-banner{
        display: none;
    }
    .desktop-banner{
        display: revert;
    }

    /* tabs */
    .tab-button h2 {
        font-size: var(--type-small);
    }
    
    /* blocks */

    .movie-block .schedule-summary li{
        display: revert;
    }
}



/* ######## */

/* actual desktop */

@media only screen and (min-width: 900px) {

    /* main info */

    .main-info{
        display: flex;
        gap: var(--margin);
        width: 100%;
    }
    .main-info>*{
        width: 50%;
    }

    /* block */

    .movie-block.intro{
        display: flex;
        gap: var(--margin);
        width: 100%;
    }
    .movie-block.intro>*{
        width: 50%;
    }

}