.navbar-brand
{
    padding-top: 20px;
}
.hero-collage {
    position: relative;
    max-width: 980px;
    margin-inline: auto;
}

.hero-collage__base {
    width: 100%;
    height: auto;
    display: block;
}

.hero-collage__overlay {
    position: absolute;
    height: auto;
    max-width: 42%;
    box-shadow:
            0 25px 50px -12px rgb(17 24 39 / 0.25),
            0 10px 15px -3px rgb(17 24 39 / 0.15) !important;
}

.hero-collage__overlay--right {
    top: 60%;
    right: clamp(-56px, -7vw, -16px);
}

.hero-collage__overlay--top-left {
    top: 10%;
    left: clamp(-64px, -8vw, -18px);
    width: clamp(180px, 30vw, 420px);
    max-width: 52%;
}

.hero-collage__overlay--bottom-left {
    bottom: -10%;
    left: clamp(-70px, -9vw, -20px);
}

@media (max-width: 991.98px) {
    .hero-collage__overlay {
        width: clamp(120px, 30vw, 240px);
    }

    .hero-collage__overlay--top-left {
        width: clamp(150px, 36vw, 300px);
    }
}

@media (max-width: 575.98px) {
    .hero-collage {
        max-width: 100%;
    }

    .hero-collage__overlay {
        width: clamp(96px, 34vw, 170px);
    }

    .hero-collage__overlay--right {
        right: -8px;
        top: 63%;
    }

    .hero-collage__overlay--top-left {
        left: -10px;
        top: 8%;
        width: clamp(120px, 42vw, 210px);
    }

    .hero-collage__overlay--bottom-left {
        left: -12px;
        bottom: -8%;
    }
}