.banner-with-text-wrapper {
    margin-bottom: 2rem;
}

.banner-with-text {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160px;
    overflow: hidden;
}

.banner-with-text img {
    width: 100%;
}

.banner-with-text .banner-with-text-text {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    .banner-with-text {
        height: 280px;
    }
}

@media (min-width: 1024px) {
    .banner-with-text {
        height: 360px;
    }
}

@media (min-width: 1024px) {
    .banner-with-text {
        height: calc(max(400px, 23vw));
    }
}