.image-section.left {
    position: relative;
    width: 100%;
    height: var(--image-height);
    background-color: white;
    overflow: visible;
}

.image-section.left::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: calc(100vw - var(--image-width) + (var(--image-height) / 2));
    background-color: var(--bg-color);
    clip-path: polygon(
        calc(var(--image-width) - (var(--image-height) / 2)) 0%,
        100% 0%,
        100% 100%
    );
    z-index: 1;
}

.image-section.left::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--image-width);
    height: 100%;
    background-image: var(--image-2);
    background-size: cover;
    background-position: left center;
    clip-path: polygon(
        0% 0%,
        calc(var(--image-width) - (var(--image-height) / 2)) 0%,
        var(--image-width) 50%,
        calc(var(--image-width) - (var(--image-height) / 2)) 100%,
        0% 100%
    );
    z-index: 2;
}

.image-section.left .image-section__content {
    margin-left: calc(100% - 500px);
    padding-top: 20px;
    width: 350px;
    position: relative;
    z-index: 3;
}

.image-section.left .image-section__subtitle {
    margin-top: 10px;
}

.image-section.image-3::after {
    background-image: var(--image-3);
}

.contact-section::before {
    clip-path: polygon(
        calc(100% - var(--image-width) + (var(--image-height) / 2)) 0%,
        100% 0%,
        100% 100%,
        0% 100%,
        0% calc(100vw - var(--image-width) + (var(--image-height) / 2))
    );
}

@media (max-width: 767px) {
    .image-section.left::before {
        height: calc(100vw - var(--image-width) + (var(--image-height) * 1.5));
        clip-path: polygon(
            0% 0%,
            100% 0%,
            100% 100%,
            calc(var(--image-width) - (var(--image-height) / 2)) var(--image-height)
        );
    }

    .image-section.left::after {
        height: var(--image-height);
    }

    .image-section.left .image-section__content {
        margin-left: calc(100% - 210px - var(--layout-inline-margin));
        padding-top: calc(var(--image-height) + 52px);
        width: 210px;
    }

    .about-us-section__content {
        padding-top: 250px;
    }

    .contact-section::before {
        clip-path: polygon(
            0% 0%,
            100% 100vw,
            100% 100%,
            0% 100%
        );
    }
}