@posiwise/shared-components 0.0.10 → 0.0.12

package/assets/scss/dashboard/_gallery.scss

@@ -0,0 +1,1201 @@
+// ================================================================================================
+// 	File Name: gallery
+// 	Description: Page content different types of gallery page layouts SCSS.
+// ================================================================================================
+
+.gallery-thumbnail {
+    height: auto;
+    max-width: 100%;
+}
+
+.grid-sizer,
+.grid-item {
+    width: 20%;
+}
+
+.grid-item {
+    figure,
+    > div {
+        margin: 0.4rem;
+    }
+}
+
+/*  masonry grid media queries */
+@media screen and (max-width: 2200px) {
+    .grid-sizer,
+    .grid-item {
+        width: 20%;
+    }
+}
+
+@media screen and (max-width: 1800px) {
+    .grid-sizer,
+    .grid-item {
+        width: 30%;
+    }
+}
+
+@media screen and (max-width: 1600px) {
+    .grid-sizer,
+    .grid-item {
+        width: 33.3333%;
+    }
+}
+
+@media screen and (max-width: 1224px) {
+    .grid-sizer,
+    .grid-item {
+        width: 33.33%;
+    }
+}
+
+@media screen and (max-width: 980px) {
+    .grid-sizer,
+    .grid-item {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 720px) {
+    .grid-sizer,
+    .grid-item {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .grid-sizer,
+    .grid-item {
+        width: 100%;
+    }
+}
+
+/* Gallery hover effects */
+
+.grid-hover {
+    list-style: none;
+    margin: 0 auto;
+    padding: 1em 0 4em;
+    position: relative;
+
+    figure {
+        background: rgb(48 133 163);
+        cursor: pointer;
+        margin: 10px 1%;
+        max-height: 360px;
+        max-width: 100%;
+        overflow: hidden;
+        position: relative;
+        text-align: center;
+
+        img {
+            display: block;
+            max-width: 100%;
+            min-height: 100%;
+            opacity: 0.8;
+            position: relative;
+        }
+
+        figcaption {
+            backface-visibility: hidden;
+            color: rgb(255 255 255);
+            font-size: 1.25em;
+            height: 100%;
+            left: 0;
+            padding: 2em;
+            position: absolute;
+            text-transform: uppercase;
+            top: 0;
+            width: 100%;
+
+            &::before {
+                pointer-events: none;
+            }
+
+            &::after {
+                pointer-events: none;
+            }
+
+            > a {
+                font-size: 0;
+                height: 100%;
+                left: 0;
+                opacity: 0;
+                position: absolute;
+                text-indent: 200%;
+                top: 0;
+                white-space: nowrap;
+                width: 100%;
+                z-index: 1000;
+            }
+        }
+
+        h2 {
+            font-weight: 300;
+            margin: 0;
+            word-spacing: -0.15em;
+
+            span {
+                font-weight: 800;
+            }
+        }
+
+        p {
+            font-size: 68.5%;
+            letter-spacing: 1px;
+            margin: 0;
+        }
+    }
+}
+
+/* --------------- */
+
+/***** Lily *****/
+
+/* --------------- */
+figure.effect-lily {
+    img {
+        max-width: none;
+        opacity: 0.7;
+        transform: translate3d(-40px, 0, 0);
+        transition: opacity 0.35s, transform 0.35s;
+        width: calc(100% + 50px);
+    }
+
+    figcaption {
+        text-align: left;
+
+        > div {
+            bottom: 0;
+            height: 50%;
+            left: 0;
+            padding: 2em;
+            position: absolute;
+            width: 100%;
+        }
+    }
+
+    h2 {
+        transform: translate3d(0, 40px, 0);
+        transition: transform 0.35s;
+    }
+
+    p {
+        color: rgb(255 255 255 / 80%);
+        opacity: 0;
+        transform: translate3d(0, 40px, 0);
+        transition: opacity 0.2s, transform 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+            transition-delay: 0.05s;
+            transition-duration: 0.35s;
+        }
+
+        h2 {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+}
+
+/* --------------- */
+
+/***** Sadie *****/
+
+/* --------------- */
+
+figure.effect-sadie {
+    figcaption {
+        &::before {
+            background: linear-gradient(to bottom, rgb(72 76 97 / 0%) 0%, rgb(72 76 97 / 80%) 75%);
+            content: '';
+            height: 100%;
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            transform: translate3d(0, 50%, 0);
+            transition: opacity 0.35s, transform 0.35s;
+            width: 100%;
+        }
+    }
+
+    h2 {
+        color: rgb(72 76 97);
+        left: 0;
+        position: absolute;
+        top: 50%;
+        transform: translate3d(0, -50%, 0);
+        transition: transform 0.35s, color 0.35s;
+        width: 100%;
+    }
+
+    p {
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        padding: 2em;
+        position: absolute;
+        transform: translate3d(0, 10px, 0);
+        transition: opacity 0.35s, transform 0.35s;
+        width: 100%;
+    }
+
+    &:hover {
+        h2 {
+            color: rgb(255 255 255);
+            transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
+        }
+
+        figcaption {
+            &::before {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+}
+
+/* --------------- */
+
+/***** Roxy *****/
+
+/* --------------- */
+figure.effect-roxy {
+    background: linear-gradient(45deg, rgb(255 137 233) 0%, rgb(5 171 224) 100%);
+
+    img {
+        max-width: none;
+        transform: translate3d(-50px, 0, 0);
+        transition: opacity 0.35s, transform 0.35s;
+        width: calc(100% + 60px);
+    }
+
+    figcaption {
+        padding: 3em;
+        text-align: left;
+
+        &::before {
+            border: 1px solid rgb(255 255 255);
+            bottom: 30px;
+            content: '';
+            left: 30px;
+            opacity: 0;
+            position: absolute;
+            right: 30px;
+            top: 30px;
+            transform: translate3d(-20px, 0, 0);
+            transition: opacity 0.35s, transform 0.35s;
+        }
+    }
+
+    h2 {
+        padding: 30% 0 10px;
+    }
+
+    p {
+        opacity: 0;
+        transform: translate3d(-10px, 0, 0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 0.7;
+            transform: translate3d(0, 0, 0);
+        }
+
+        figcaption {
+            &::before {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+}
+
+/* --------------- */
+
+/***** Bubba *****/
+
+/* --------------- */
+figure.effect-bubba {
+    background: rgb(158 84 6);
+
+    img {
+        opacity: 0.7;
+        transition: opacity 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 0.4;
+        }
+
+        figcaption {
+            &::before {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            &::after {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        h2 {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    figcaption {
+        &::before {
+            border-bottom: 1px solid rgb(255 255 255);
+            border-top: 1px solid rgb(255 255 255);
+            bottom: 30px;
+            content: '';
+            left: 30px;
+            opacity: 0;
+            position: absolute;
+            right: 30px;
+            top: 30px;
+            transform: scale(0, 1);
+            transition: opacity 0.35s, transform 0.35s;
+        }
+
+        &::after {
+            border-left: 1px solid rgb(255 255 255);
+            border-right: 1px solid rgb(255 255 255);
+            bottom: 30px;
+            content: '';
+            left: 30px;
+            opacity: 0;
+            position: absolute;
+            right: 30px;
+            top: 30px;
+            transform: scale(1, 0);
+            transition: opacity 0.35s, transform 0.35s;
+        }
+    }
+
+    h2 {
+        padding-top: 30%;
+        transform: translate3d(0, -20px, 0);
+        transition: transform 0.35s;
+    }
+
+    p {
+        opacity: 0;
+        padding: 20px 2.5em;
+        transform: translate3d(0, 20px, 0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+}
+
+/* --------------- */
+
+/***** Romeo *****/
+
+/* --------------- */
+figure.effect-romeo {
+    perspective: 1000px;
+
+    img {
+        transform: translate3d(0, 0, 300px);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 0.6;
+            transform: translate3d(0, 0, 0);
+        }
+
+        figcaption {
+            &::before {
+                opacity: 0.5;
+                transform: translate3d(-50%, -50%, 0) rotate(45deg);
+            }
+
+            &::after {
+                opacity: 0.5;
+                transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+            }
+        }
+
+        h2 {
+            transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
+        }
+
+        p {
+            transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
+        }
+    }
+
+    figcaption {
+        &::before {
+            background: rgb(255 255 255);
+            content: '';
+            height: 1px;
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translate3d(-50%, -50%, 0);
+            transition: opacity 0.35s, transform 0.35s;
+            width: 80%;
+        }
+
+        &::after {
+            background: rgb(255 255 255);
+            content: '';
+            height: 1px;
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translate3d(-50%, -50%, 0);
+            transition: opacity 0.35s, transform 0.35s;
+            width: 80%;
+        }
+    }
+
+    h2 {
+        left: 0;
+        position: absolute;
+        top: 50%;
+        transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
+        transition: transform 0.35s;
+        width: 100%;
+    }
+
+    p {
+        left: 0;
+        padding: 0.25em 2em;
+        position: absolute;
+        top: 50%;
+        transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
+        transition: transform 0.35s;
+        width: 100%;
+    }
+}
+
+/* --------------- */
+
+/***** Layla *****/
+
+/* --------------- */
+figure.effect-layla {
+    background: rgb(24 163 103);
+
+    img {
+        height: 390px;
+        transform: translate3d(0, -30px, 0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    figcaption {
+        padding: 3em;
+
+        &::before {
+            border-bottom: 1px solid rgb(255 255 255);
+            border-top: 1px solid rgb(255 255 255);
+            bottom: 50px;
+            content: '';
+            left: 30px;
+            opacity: 0;
+            position: absolute;
+            right: 30px;
+            top: 50px;
+            transform: scale(0, 1);
+            transform-origin: 0 0;
+            transition: opacity 0.35s, transform 0.35s;
+        }
+
+        &::after {
+            border-left: 1px solid rgb(255 255 255);
+            border-right: 1px solid rgb(255 255 255);
+            bottom: 30px;
+            content: '';
+            left: 50px;
+            opacity: 0;
+            position: absolute;
+            right: 50px;
+            top: 30px;
+            transform: scale(1, 0);
+            transform-origin: 100% 0;
+            transition: opacity 0.35s, transform 0.35s;
+        }
+    }
+
+    h2 {
+        padding-top: 26%;
+        transform: translate3d(0, -30px, 0);
+        transition: transform 0.35s;
+    }
+
+    p {
+        opacity: 0;
+        padding: 0.5em 2em;
+        text-transform: none;
+        transform: translate3d(0, -10px, 0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 0.7;
+            transform: translate3d(0, 0, 0);
+            transition-delay: 0.15s;
+        }
+
+        figcaption {
+            &::before {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            &::after {
+                opacity: 1;
+                transform: scale(1);
+                transition-delay: 0.15s;
+            }
+        }
+
+        h2 {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+            transition-delay: 0.15s;
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+            transition-delay: 0.15s;
+        }
+    }
+}
+
+/* --------------- */
+
+/***** Honey *****/
+
+/* --------------- */
+figure.effect-honey {
+    background: rgb(74 55 83);
+
+    img {
+        opacity: 0.9;
+        transition: opacity 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 0.5;
+        }
+
+        figcaption {
+            &::before {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        h2 {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+
+            i {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
+        }
+    }
+
+    figcaption {
+        &::before {
+            background: rgb(255 255 255);
+            bottom: 0;
+            content: '';
+            height: 10px;
+            left: 0;
+            position: absolute;
+            transform: translate3d(0, 10px, 0);
+            transition: transform 0.35s;
+            width: 100%;
+        }
+    }
+
+    h2 {
+        bottom: 0;
+        left: 0;
+        padding: 1em 1.5em;
+        position: absolute;
+        text-align: left;
+        transform: translate3d(0, -30px, 0);
+        transition: transform 0.35s;
+        width: 100%;
+
+        i {
+            font-style: normal;
+            opacity: 0;
+            transform: translate3d(0, -30px, 0);
+            transition: opacity 0.35s, transform 0.35s;
+        }
+    }
+}
+
+/* --------------- */
+
+/***** Oscar *****/
+
+/* --------------- */
+figure.effect-oscar {
+    background: linear-gradient(45deg, rgb(34 104 42) 0%, rgb(155 74 27) 40%, rgb(58 52 42) 100%);
+
+    img {
+        opacity: 0.9;
+        transition: opacity 0.35s;
+    }
+
+    figcaption {
+        background-color: rgb(58 52 42 / 70%);
+        padding: 3em;
+        transition: background-color 0.35s;
+
+        &::before {
+            border: 1px solid rgb(255 255 255);
+            bottom: 30px;
+            content: '';
+            left: 30px;
+            opacity: 0;
+            position: absolute;
+            right: 30px;
+            top: 30px;
+            transform: scale(0);
+            transition: opacity 0.35s, transform 0.35s;
+        }
+    }
+
+    h2 {
+        margin: 20% 0 10px;
+        transform: translate3d(0, 100%, 0);
+        transition: transform 0.35s;
+    }
+
+    p {
+        opacity: 0;
+        transform: scale(0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    &:hover {
+        h2 {
+            transform: translate3d(0, 0, 0);
+        }
+
+        figcaption {
+            background-color: rgb(58 52 42 / 0%);
+
+            &::before {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        p {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        img {
+            opacity: 0.4;
+        }
+    }
+}
+
+/* --------------- */
+
+/***** Marley *****/
+
+/* --------------- */
+figure.effect-marley {
+    figcaption {
+        text-align: right;
+    }
+
+    h2 {
+        left: 30px;
+        padding: 10px 0;
+        position: absolute;
+        right: 30px;
+        top: 30px;
+        transform: translate3d(0, 20px, 0);
+        transition: transform 0.35s;
+
+        &::after {
+            background: rgb(255 255 255);
+            content: '';
+            height: 4px;
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            top: 100%;
+            transform: translate3d(0, 40px, 0);
+            transition: opacity 0.35s, transform 0.35s;
+            width: 100%;
+        }
+    }
+
+    i {
+        display: none;
+    }
+
+    p {
+        bottom: 30px;
+        left: 30px;
+        line-height: 1.5;
+        opacity: 0;
+        padding: 10px 0;
+        position: absolute;
+        right: 30px;
+        transform: translate3d(0, 100%, 0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    &:hover {
+        i {
+            color: rgb(78 77 77);
+            display: inline-block;
+            font-size: 30px;
+            outline: none !important;
+            position: absolute;
+            right: 8px;
+            top: 8px;
+        }
+
+        h2 {
+            transform: translate3d(0, 0, 0);
+
+            &::after {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+}
+
+/* --------------- */
+
+/***** Ruby *****/
+
+/* --------------- */
+figure.effect-ruby {
+    background-color: rgb(23 129 156);
+
+    img {
+        opacity: 0.7;
+        transform: scale(1.15);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 0.5;
+            transform: scale(1);
+        }
+
+        h2 {
+            transform: translate3d(0, 0, 0);
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0) scale(1);
+        }
+    }
+
+    h2 {
+        margin-top: 20%;
+        transform: translate3d(0, 20px, 0);
+        transition: transform 0.35s;
+    }
+
+    p {
+        border: 1px solid rgb(255 255 255);
+        margin: 1em 0 0;
+        opacity: 0;
+        padding: 3em;
+        transform: translate3d(0, 20px, 0) scale(1.1);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+}
+
+/* --------------- */
+
+/***** Milo *****/
+
+/* --------------- */
+figure.effect-milo {
+    background: rgb(46 93 90);
+
+    img {
+        max-width: none;
+        opacity: 1;
+        transform: translate3d(-30px, 0, 0) scale(1.12);
+        transition: opacity 0.35s, transform 0.35s;
+        width: calc(100% + 60px);
+    }
+
+    &:hover {
+        img {
+            opacity: 0.5;
+            transform: translate3d(0, 0, 0) scale(1);
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    h2 {
+        bottom: 0;
+        padding: 1em 1.2em;
+        position: absolute;
+        right: 0;
+    }
+
+    p {
+        border-right: 1px solid rgb(255 255 255);
+        opacity: 0;
+        padding: 0 10px 0 0;
+        text-align: right;
+        transform: translate3d(-40px, 0, 0);
+        transition: opacity 0.35s, transform 0.35s;
+        width: 50%;
+    }
+}
+
+/* --------------- */
+
+/***** Dexter *****/
+
+/* --------------- */
+figure.effect-dexter {
+    background: linear-gradient(to bottom, rgb(37 141 200 / 100%) 0%, rgb(104 60 19 / 100%) 100%);
+
+    img {
+        transition: opacity 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 0.4;
+        }
+
+        figcaption {
+            &::after {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    figcaption {
+        padding: 3em;
+        text-align: left;
+
+        &::after {
+            border: 7px solid rgb(255 255 255);
+            bottom: 30px;
+            content: '';
+            height: calc(50% - 30px);
+            left: 30px;
+            position: absolute;
+            right: 30px;
+            transform: translate3d(0, -100%, 0);
+            transition: transform 0.35s;
+        }
+    }
+
+    p {
+        bottom: 60px;
+        left: 60px;
+        opacity: 0;
+        position: absolute;
+        right: 60px;
+        transform: translate3d(0, -100px, 0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+}
+
+/* --------------- */
+
+/***** Sarah *****/
+
+/* --------------- */
+figure.effect-sarah {
+    background: rgb(66 176 120);
+
+    img {
+        backface-visibility: hidden;
+        max-width: none;
+        transform: translate3d(-10px, 0, 0);
+        transition: opacity 0.35s, transform 0.35s;
+        width: calc(100% + 20px);
+    }
+
+    &:hover {
+        img {
+            opacity: 0.4;
+            transform: translate3d(0, 0, 0);
+        }
+
+        h2 {
+            &::after {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        p {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    figcaption {
+        text-align: left;
+    }
+
+    h2 {
+        overflow: hidden;
+        padding: 0.5em 0;
+        position: relative;
+
+        &::after {
+            background: rgb(255 255 255);
+            bottom: 0;
+            content: '';
+            height: 3px;
+            left: 0;
+            position: absolute;
+            transform: translate3d(-100%, 0, 0);
+            transition: transform 0.35s;
+            width: 100%;
+        }
+    }
+
+    p {
+        opacity: 0;
+        padding: 1em 0;
+        transform: translate3d(100%, 0, 0);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+}
+
+/* --------------- */
+
+/***** Zoe *****/
+
+/* --------------- */
+figure.effect-zoe {
+    figcaption {
+        background: rgb(255 255 255);
+        bottom: 0;
+        color: rgb(60 74 80);
+        height: 3.75em;
+        padding: 1em;
+        top: auto;
+        transform: translate3d(0, 100%, 0);
+        transition: transform 0.35s;
+    }
+
+    h2 {
+        display: inline-block;
+        float: left;
+        transform: translate3d(0, 200%, 0);
+        transition: transform 0.35s;
+    }
+
+    p.icon-links {
+        a {
+            color: rgb(60 74 80);
+            float: right;
+            font-size: 1.4em;
+            transform: translate3d(0, 200%, 0);
+            transition: transform 0.35s;
+
+            span {
+                &::before {
+                    display: inline-block;
+                    font-family: $featherI;
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    padding: 8px 10px;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        p.icon-links {
+            a {
+                transform: translate3d(0, 0, 0);
+
+                &:hover {
+                    color: rgb(37 45 49);
+                }
+
+                &:focus {
+                    color: rgb(37 45 49);
+                }
+
+                &:nth-child(3) {
+                    transition-delay: 0.1s;
+                }
+
+                &:nth-child(2) {
+                    transition-delay: 0.15s;
+                }
+
+                &:first-child {
+                    transition-delay: 0.2s;
+                }
+            }
+        }
+
+        p.description {
+            opacity: 1;
+        }
+
+        figcaption {
+            transform: translate3d(0, 0, 0);
+        }
+
+        h2 {
+            transform: translate3d(0, 0, 0);
+            transition-delay: 0.05s;
+        }
+    }
+
+    p.description {
+        backface-visibility: hidden;
+        bottom: 8em;
+        color: rgb(255 255 255);
+        font-size: 90%;
+        opacity: 0;
+        padding: 2em;
+        position: absolute;
+        text-transform: none;
+        transition: opacity 0.35s;
+    }
+}
+
+/* --------------- */
+
+/***** Chico *****/
+
+/* --------------- */
+
+figure.effect-chico {
+    img {
+        transform: scale(1.12);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    &:hover {
+        img {
+            opacity: 0.5;
+            transform: scale(1);
+        }
+
+        figcaption {
+            &::before {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        p {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    figcaption {
+        padding: 3em;
+
+        &::before {
+            border: 1px solid rgb(255 255 255);
+            bottom: 30px;
+            content: '';
+            left: 30px;
+            opacity: 0;
+            position: absolute;
+            right: 30px;
+            top: 30px;
+            transform: scale(1.1);
+            transition: opacity 0.35s, transform 0.35s;
+        }
+    }
+
+    p {
+        margin: 0 auto;
+        max-width: 200px;
+        opacity: 0;
+        transform: scale(1.5);
+        transition: opacity 0.35s, transform 0.35s;
+    }
+
+    h2 {
+        padding: 20% 0 20px;
+    }
+}
+
+@media screen and (max-width: 50em) {
+    .content {
+        padding: 0 10px;
+    }
+
+    .grid {
+        figure {
+            display: inline-block;
+            float: none;
+            margin: 10px auto;
+            width: 100%;
+        }
+    }
+}