.breadcrumbs{
    width: 100%;
    position: relative;
    max-height: 500px;
}

.breadcrumbs img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center;
}

.breadcrumbs h2 {
    text-align: center;
    font-size: var(--XXL);
    font-weight: 600;
    font-family: var(--fontheader);
    position: absolute;
    bottom: 100px;
    color: var(--white);
    width: 100%;
}

.breadcrumbs .wave-animation{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
}

@media (max-width: 834px){
    .breadcrumbs{
        max-height: 400px;
    }
    .breadcrumbs h2{
        font-size: var(--mobileXXL);
    }
    .breadcrumbs img {
        height: 400px;
    }
}