.video-background {
    z-index: -1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: calc(95vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
    object-fit: cover;
    /* This ensures the video fills the container while maintaining aspect ratio */
}

tbc-header::before {
    opacity: 0.25;
}

/* HERO */
.hero {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 100px);
    /* with header height */
}


/* SECTION */
.section .padding {
    padding: 1rem 5rem;
}

.section .photo {
    overflow: hidden;
    /* Hide overflow when image scales */
    width: 100%;
    padding: 1rem 0rem;
    box-sizing: border-box;
    max-width: unset;
    height: calc(50vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: 700px;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.3s ease;
    /* Add a smooth transition effect */
}

.photo img:hover {
    transform: scale(1.2);
}

.lowerz {
    z-index: 99;
}

.mosaicold {
    display: grid;
    width: 100%;
    height: calc(80vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(7, 1fr);
    grid-template-areas:
        "a b"
        "a b"
        "a c"
        "d c"
        "d c"
        "d e"
        "d e";
}

.mosaic {
    display: grid;
    width: 100%;
    gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "a"
        "b"
        "c"
        "d"
        "e";
}

.mosaic span {
    padding: 1rem;
    box-sizing: border-box;
    border: 1px solid currentColor;
    color: var(--color-two, currentColor);
    background-color: var(--color-two-inv, white);
    transition: all 0.2s ease, visibility 0s;
}

.mosaic span:hover {
    background-color: var(--color-two, currentColor);
    color: var(--color-two-inv, white);
}

.mosaic>* {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;

    min-height: 300px;
    height: 50vh;
    max-height: 600px;
}

.mosaic>*:nth-child(1) {
    grid-area: a;
    background-image: url("https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")
}

.mosaic>*:nth-child(2) {
    grid-area: b;
    background-image: url("https://images.unsplash.com/photo-1508962914676-134849a727f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")
}

.mosaic>*:nth-child(3) {
    grid-area: c;
    background-image: url("https://images.unsplash.com/photo-1471922694854-ff1b63b20054?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80")
}

.mosaic>*:nth-child(4) {
    grid-area: d;
    background-image: url("https://images.unsplash.com/photo-1508962914676-134849a727f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")
}

.mosaic>*:nth-child(5) {
    grid-area: e;
    background-image: url("https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")
}



.col-3 {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
}
.col-3 > * {
    padding:1rem;
}


@media only screen and (max-width: 800px) {
    .col-3 {
        grid-template-columns: 1fr;
    }
}


@media only screen and (max-width: 500px) {
    .section {
        padding: 1rem 0px;
    }

    .section .padding {
        padding: 1rem 1rem;
    }
    .section  .photo {
        padding: 0.5rem 1rem;
    }
}


.slide-in-fwd-bottom {
    -webkit-animation: slide-in-fwd-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-fwd-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-9-26 12:38:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-fwd-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-bottom {
    0% {
        -webkit-transform: translateY(30%);
        transform: translateY(30%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-in-fwd-bottom {
    0% {
        -webkit-transform: translateY(30%);
        transform: translateY(30%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}