@media (min-width: 769px){
    .header-overlay{
        background: rgba(0,0,0,.3);
        z-index: 3;
    }
}

.flex-align-center {
    display: flex;
    justify-content: center;
}

.text-black {
    color: black !important;
}

.box-shadow {
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%) !important;
}

.extra-item-image > img {
    width: 100%;
}

#pageHeader{
    background-size: cover;
}
#pageContainer{
    clear: both
}

.shorts-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}
.short {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.short:hover { transform: scale(1.02); }
.short iframe {
    width: 100%;
    height: 356px; /* Vertical aspect for Shorts */
    border: none;
}
.short-title {
    padding: 10px;
    margin: 0;
    font-size: 1.3rem;
    text-align: center;
    color: #333;
}
.loading { text-align: center; color: #666; }
.error { color: #d00; text-align: center; }
@media(min-width: 0px) and (max-width: 899px){
    #pageHeader{
        height: 320px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .header-overlay{
        height: 320px;
    }
}

@media(min-width: 900px) and (max-width: 1399px){
    #pageHeader{
        height: 400px;
    }
    .header-overlay{
        height: 400px;
    }
}
@media(min-width: 1401px) and (max-width: 1700px){
    #pageHeader{
        height: 550px;
    }
    .header-overlay{
        height: 550px;
    }
}
@media(min-width: 1701px){
    #pageHeader{
        height: 650px;
        background-repeat: no-repeat;
        /*background-origin: center;*/
        /*background-size: contain;*/
        /*background-position: top;*/
        /*background-attachment: fixed;*/
    }
    .header-overlay{
        height: 650px;
    }
}
@media(min-width: 1901px){
    #pageHeader{
        height: 750px;
        background-repeat: no-repeat;
        /*background-origin: center;*/
        /*background-size: contain;*/
        /*background-position: top;*/
        /*background-attachment: fixed;*/
    }
    .header-overlay{
        height: 750px;
    }
}