Tiny File Manager | _tile-gallery.scss

Back Back Up Advanced Editor

/*======= 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;
        }
    }
}