.banner-holder {
    padding: 80px 0 80px;
}

.banner-holder-inner {
    border-radius: var(--border-radius);
    background: var(--banner-background-color);
    color: var(--banner-text-color);
    padding: 40px 60px;
    display: flex;
    gap: 120px;
}

.banner-holder-inner .image-holder {
    width: 460px;
    min-width: 460px;
    margin: -90px 0;
}

.banner-holder-inner .image-holder img {
    box-shadow: var(--box-shadow);
}

.banner-holder .content-holder {
    align-self: center;
}

.banner-holder-inner .heading-component h2 {
    color: var(--banner-title-color)
}

.banner-holder-inner .heading-component .above-heading-title {
    color: var(--banner-above-title-color)
}

.banner-holder .text-component a {
    color: var(--banner-link-color)
}

.banner-holder .text-component a:hover {
    color: var(--banner-link-color-hover)
}

@media only screen and (max-width: 1199px) {
    .banner-holder-inner {
        gap: 60px;
    }

    .banner-holder-inner .image-holder {
        width: 300px;
        min-width: 300px;
    }
}

@media only screen and (max-width: 991px) {
    .banner-holder-inner {
        gap: 30px;
        padding: 40px 30px;
    }

    .banner-holder-inner .image-holder {
        width: 300px;
        min-width: 300px;
    }
}

@media only screen and (max-width: 767px) {
    .banner-holder-inner {
        flex-wrap: wrap;
    }

    .banner-holder-inner .image-holder {
        margin-bottom: 0
    }
}