.img-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.img-wrap img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    height: auto;
}

.section--white .img-wrap.shape {
    padding: 20px 0 0 0;
}

.img-wrap.shape:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
}


@media only screen and (min-width: 768px) {
    /* triangle */
    main .section--white .img-wrap.shape:before {
        top: -26px;
        left: -120px;
        width: 0;
        height: 0;
        border-left: 150px solid transparent;
        border-right: 150px solid transparent;
        border-bottom: 150px solid var(--primary-color);
        transform: rotate(-45deg);
        clip-path: none;
        background: transparent;
    }

    /* triangle */
    main .section--white .section__col--last .img-wrap.shape:before {
        top: -27px;
        right: -120px;
        left: auto;
        clip-path: none;
        transform: rotate(45deg);
    }
}

@media only screen and (max-width: 768px) {
    main .section--white .img-wrap.shape:before {
        top: 40px;
        left: 20px;
        width: 80px;;
        height: 80px;
        background-color: var(--primary-color);
        transform: rotate(-0deg);
        clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
        z-index: 100;
    }
}