[anim="ripple"] {
    --ripple-background: white;
    --ripple-opacity: 0.3;
    --ripple-duration: 600ms;
    --ripple-easing: linear;
    --x: 1px;
    --y: 1px;
    --d: 1px;
    --o: 1;
    --t: 0;
    --s: 1;
    position: relative;
    overflow: hidden;
}
[anim="ripple"]:before {
    content: "";
    position: absolute;
    display: block;
    background: var(--ripple-background);
    border-radius: 50%;
    pointer-events: none;
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
    width: calc(var(--d) * 1px);
    height: calc(var(--d) * 1px);
    opacity: calc(var(--o) * var(--ripple-opacity));
    transition: calc(var(--t) * var(--ripple-duration)) var(--ripple-easing);
    transform: translate(-50%, -50%) scale(var(--s));
    transform-origin: center;
}

.card {
    border: none;
    background-color: unset;
}

.nav-tabs.nav-tabs-material {
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-border-color: #dee2e6;
    --bs-nav-tabs-link-active-color: #db2128;
    --bs-nav-tabs-link-active-border-color: #db2128;
    width: fit-content;
}
.nav-tabs.nav-tabs-material .nav-item {
    --ripple-background: black;
    --ripple-opacity: 0.15;
}

.nav-tabs.nav-tabs-material .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    letter-spacing: 0.01rem;
    color: rgba(0, 0, 0, 0.75);
    font-size: 12pt;
    font-weight: 500;
    line-height: 100%;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 0.75rem;
}

.nav-tabs.nav-tabs-material .nav-link:hover {
    background-color: hsl(0, 0%, 91%, 0.75);
}
.nav-tabs.nav-tabs-material .nav-link.active {
    background-color: transparent;
    border-width:3px;
    color: #db2128;
}

.nav-tabs.nav-tabs-material.nav-tabs-material--narrow .nav-link {
    min-height: 2rem;
    padding: 0.25rem 0.85rem;
}

.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 15px;
    max-width: 1100px;
    padding: 15px;
    margin: 0 auto;
    box-sizing: border-box;
    direction: ltr;
}

.video-gallery .gallery-item {
    position: relative;
    height: 300px;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

.video-gallery .gallery-item img {
    position: relative;
    display: block;
    width: 115%;
    height: 300px;
    object-fit: cover;
    opacity: .5;
    /*transition: opacity .35s, transform .35s;*/
    transition: all 350ms ease-in-out;
    transform: translate3d(-23px, 0, 0);
    /*backface-visibility: hidden;*/
}

.north-cascades-img {
    object-position: 50% 30%;
}

.video-gallery .gallery-item .gallery-item-caption {
    padding: 32px;
    font-size: 1em;
    color: #fff;
    text-transform: uppercase;
}

.video-gallery .gallery-item .gallery-item-caption,
.video-gallery .gallery-item .gallery-item-caption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-gallery .gallery-item h2 {
    font-weight: 300;
    overflow: hidden;
    padding: 12px 0;
}

.video-gallery .gallery-item h2,
.video-gallery .gallery-item p {
    position: relative;
    margin: 0;
    z-index: 1;
    pointer-events: none;
}

.video-gallery .gallery-item p {
    letter-spacing: 1px;
    font-size: 15px;
    padding: 12px 0;
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(10%, 0, 0);
    border-bottom: 1px solid #fff;
}

.video-gallery .gallery-item:hover img {
    opacity: 0.3;
    transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item .gallery-item-caption {
    text-align: left;
}

.video-gallery .gallery-item h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 15%;
    height: 1px;
    background: #fff;
    transition: transform 0.3s;
    transform: translate3d(-100%, 0, 0);
}

.video-gallery .gallery-item:hover h2::after {
    transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item:hover p {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}