/*======= Tile Gallery =======*/
.tile-gallery-one {
    text-align: right;

    img {
        border: 11px solid $white;
        box-shadow: 0px 13px 30px rgba(0, 0, 0, 0.07);
    }

    .img-one {
        text-align: left;

        @include respond-between(lg, xl) {
            max-width: 90%;
        }

        @include respond-below(md) {
            max-width: 90%;
        }
    }

    .img-two {
        margin-top: -80px;
        position: relative;
        display: inline-block;
        margin-left: auto;
        z-index: 1;

        @include respond-between(lg, xl) {
            max-width: 90%;
        }

        @include respond-below(md) {
            max-width: 90%;
        }

        &::before {
            content: "";
            position: absolute;
            content: "";
            left: -15px;
            bottom: -15px;
            background-color: $primary-color;
            z-index: -1;
            height: 180px;
            width: 180px;
            clip-path: polygon(0 0, 0% 100%, 100% 100%);
        }
    }
}

.tile-gallery-two {
    text-align: right;

    .img-one {
        text-align: left;

        @include respond-below(sm) {
            max-width: 90%;
        }
    }

    .img-two {
        margin-top: -220px;
        position: relative;
        z-index: 1;
        display: inline-block;

        @include respond-between(lg, xl) {
            max-width: 80%;
        }

        @include respond-below(sm) {
            max-width: 90%;
        }

        &::before {
            content: "";
            position: absolute;
            content: "";
            right: -15px;
            bottom: -15px;
            background-color: $primary-color;
            z-index: -1;
            width: calc(100% - 80px);
            height: calc(100% - 80px);
            clip-path: polygon(100% 0, 0% 100%, 100% 100%);
        }
    }
}

.tile-gallery-three {
    .img-one {
        text-align: right;

        @include respond-below(sm) {
            max-width: 90%;
        }
    }

    .img-two {
        margin-top: -220px;
        position: relative;
        z-index: 1;
        display: inline-block;

        @include respond-below(sm) {
            max-width: 90%;
        }

        @include respond-between(lg, xl) {
            max-width: 90%;
        }

        img {
            border: 15px solid $soft-blue;
        }
    }
}