@media(max-width:55.3125rem) {
    .footer::after{
        content: '';
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background: url(/assets/img/decorations/wayang_people.png) left/70% no-repeat;
        transform: scaleX(-1);
        z-index: -2;
    }
    .footer__content{
        flex-direction: column;
        justify-content: flex-start;
    }
    .footer__aside{
        flex-direction: column;
        align-items: flex-start;
    }
    .decoration{
        display: none;
    }
}

@media(max-width:66.66rem){
    .about__content{
        flex-direction: column;
    }
    .about__img{
        width: 100%;
    }
    .about__img img{
        width: 100%;
    }
}
@media(max-width:60.50rem){}
@media(max-width:32.625rem){
    .whats-on__cards{
        display: flex;
        flex-direction: column;
    }
}
@media(max-width:51.75rem){
    .open-sidebar .bar{
        display: flex;
        flex-direction: column;
        margin:4px;
        width: 25px;
        height: 3px;
        background:var(--colour-black);
    }
    .open-sidebar{
        display: block;
        cursor: pointer;
    }
    .close-sidebar{
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .x-icon{
        position: relative;
        width:24px;
        height: 24px;
    }
    .x-icon::before,
    .x-icon::after{
        content: '';
        position: absolute;
        top:50%;
        left:0;
        width: 100%;
        height: 3px;
        background: currentColor;
    }
    .x-icon::before{
        rotate: 45deg
    }
    .x-icon::after{
        rotate: -45deg;
    }
    .nav__li:first-child{
        margin-bottom: 2rem;
    }
    .nav__ul{
        position: fixed;
        top:0;
        right:-200%;
        width: 300px;
        height: 100dvh;
        background: hsl(from var(--colour-white) h s l/.96);
        padding:2rem;
        flex-direction: column;
        align-items: flex-start;

        transition: right .8s ease-out;
        z-index: 9999;
    }
    #sidebar:checked ~ .nav__ul{
        right:0;
    }
    #sidebar:checked ~ .sidebar-overlay{
        display: block;
        position: fixed;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background:hsl(from var(--colour-black) h s l/.2);
        z-index:9998
    }
    .about__content{
        flex-direction: column;
    }
}