

<style>
    .g-portfolio {}

    .g-portfolio {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    .g-portfolio-container {
        padding: calc((10% / 3) - 1em);
    }

    .g-portfolio__object__content {
        margin-top: 1em;
        margin-bottom: 70px;
    }

    .g-portfolio__object__link {
        position: absolute;
        bottom: 0;
    }

    .g-portfolio__object__link__button {
        border: solid 1px #373744;
        background: none;
        padding: 1em 2em;
        text-transform: uppercase;
    }

    .g-portfolio__object__images:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    .g-portfolio__object__images {
        position: relative;
    }

    .g-portfolio__object__images__ipad {
        position: absolute;
        background: white;
        left: 0;
        bottom: 5%;
        width: 53%;
        height: 71%;
        border-radius: 5%/4%;
        -webkit-box-shadow: 0px 3px 5px 3px rgba(1,1,1,0.5);
                box-shadow: 0px 3px 5px 3px rgba(1,1,1,0.5);
    }

    .g-portfolio__object__images__ipad__wrapper {
        width: 92%;
        height: 94%;
        margin: 4% auto;
        position: relative;
    }

    .g-portfolio__object__images__ipad__wrapper__image {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 1%;
        -webkit-box-shadow: inset 0 0 3px 1px rgba(1,1,1,.3);
                box-shadow: inset 0 0 3px 1px rgba(1,1,1,.3);
    }

    .g-portfolio__object__images__ipad:after {
        content: "";
        width: calc(1% / 2);
        height: 18%;
        background: #e4e4e4;
        display: block;
        position: absolute;
        top: 20%;
        right: calc(-1% / 2);;
        -webkit-box-shadow: 1px 0 1px 0px rgba(1,1,1,0.5);;
                box-shadow: 1px 0 1px 0px rgba(1,1,1,0.5);
    }

    .g-portfolio__object__images__iphone {
        position: absolute;
        background: white;
        left: 59%;
        bottom: 5%;
        width: 19%;
        height: 36%;
        border-radius: 9%/5%;
        z-index: 2000;
        -webkit-box-shadow: 0px 3px 5px 2px rgba(1,1,1,0.5);
                box-shadow: 0px 3px 5px 2px rgba(1,1,1,0.5);
    }

    .g-portfolio__object__images__iphone__wrapper {
        width: 93%;
        height: 88%;
        margin: 12% auto;
        position: relative;
    }

    .g-portfolio__object__images__iphone__wrapper__image {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 5%/3%;
        -webkit-box-shadow: inset 0 0 3px 1px rgba(1,1,1,.3);
                box-shadow: inset 0 0 3px 1px rgba(1,1,1,.3);
    }

    .g-portfolio__object__images__iphone:before {
        content: "";
        width: 1%;
        height: 18%;
        background: #e4e4e4;
        display: block;
        position: absolute;
        top: 20%;
        left: -1%;
        -webkit-box-shadow: -1px 0 1px 0px rgba(1,1,1,0.5);
                box-shadow: -1px 0 1px 0px rgba(1,1,1,0.5);
    }

    .g-portfolio__object__images__iphone:after {
        content: "";
        width: 1%;
        height: 9%;
        background: #e4e4e4;
        display: block;
        position: absolute;
        top: 20%;
        right: -1%;
        -webkit-box-shadow: 1px 0 1px 0px rgba(1,1,1,0.5);
                box-shadow: 1px 0 1px 0px rgba(1,1,1,0.5);
    }

    .g-portfolio__object__images__iphone__wrapper__image:after {
        content: "";
        display: block;
        position: absolute;
        background: white;
        width: 50%;
        height: 3%;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        border-bottom-right-radius: 8% 50%;
        border-bottom-left-radius: 8% 50%;
        -webkit-box-shadow: 0px 1px 1px rgba(1,1,1,.3);
                box-shadow: 0px 1px 1px rgba(1,1,1,.3);
        top: -1px;
    }

    .g-portfolio__object__images__iphone__wrapper:before {
        content: "";
        display: block;
        width: 24%;
        height: 1%;
        position: absolute;
        background: rgba(1,1,1,.2);
        top: -3%;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        border-radius: 100%;
    }

        /* Sizes */

        .g-portfolio {
            margin-right: calc(-10% / 3);
            margin-left: calc((10% / 3) - 1em);
        }

        .g-portfolio__object {
            margin-right: calc(10% / 3);
            margin-bottom: 3%;
            position: relative;
        }

        .g-portfolio__object--third {
            -ms-flex-preferred-size: 30%;
                flex-basis: 30%;
        }

        .g-portfolio__object--twothirds {
            -ms-flex-preferred-size: calc(60% + (10% / 3));
                flex-basis: calc(60% + (10% / 3));
        }

        .g-portfolio__object--twothirds .g-portfolio__object__images:after {
            padding-bottom: 47.37%;
        }

        .g-portfolio__object--twothirds .g-portfolio__object__images__ipad {
                width: 26%;
        }

        .g-portfolio__object--twothirds .g-portfolio__object__images__iphone {
            left: 29%;
            width: 9%;
        }

        .g-portfolio__object--full {
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
        }

        .g-portfolio__object--full .g-portfolio__object__images:after {
            padding-bottom: 31.034%;
        }

        .g-portfolio__object--full .g-portfolio__object__images__ipad {
            left: 0;
            width: 17%;
        }

        .g-portfolio__object--full .g-portfolio__object__images__iphone {
            left: 19%;
            width: 6%;
        }

        .g-portfolio__object--half {
            -ms-flex-preferred-size: calc(50% - (10% / 3));
                flex-basis: calc(50% - (10% / 3));
        }

        .g-portfolio__object--half .g-portfolio__object__images:after {
            padding-bottom: 64.285%;
        }

        .g-portfolio__object--half .g-portfolio__object__images__ipad {
            left: 0;
            width: 36%;
        }

        .g-portfolio__object--half .g-portfolio__object__images__iphone {
            left: 40%;
            width: 12%;
        }

        .g-portfolio__object--twothirds .g-portfolio__object__images__imac {
            position: absolute;
            background: white;
            left: 9.5%;
            bottom: 17%;
            width: 58%;
            height: 71%;
            border-radius: 2%/4%;
            -webkit-box-shadow: 0px 3px 5px 3px rgba(1,1,1,0.5);
                    box-shadow: 0px 3px 5px 3px rgba(1,1,1,0.5);
        }

        .g-portfolio__object--twothirds .g-portfolio__object__images__imac__wrapper {
            width: 96%;
            height: 93%;
            margin: 2% auto;
            position: relative;
        }

        .g-portfolio__object__images__imac__wrapper__image {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 1%;
            -webkit-box-shadow: inset 0 0 3px 1px rgba(1,1,1,.3);
                    box-shadow: inset 0 0 3px 1px rgba(1,1,1,.3);
        }

        .g-portfolio__object--twothirds .g-portfolio__object__images__imac:after {
            content: "";
            background: #e2e2e2;
            -webkit-box-shadow: inset 0px -14px 11px 20px rgb(206, 206, 206);
                    box-shadow: inset 0px -14px 11px 20px rgb(206, 206, 206);
            position: absolute;
            width: 30%;
            height: 10%;
            display: block;
            bottom: -10%;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            -webkit-clip-path: polygon(25% 0, 0 100%, 100% 100%, 75% 0);
                    clip-path: polygon(25% 0, 0 100%, 100% 100%, 75% 0);
            shape-outside: polygon(25% 0, 0 100%, 100% 100%, 75% 0);
            z-index: -1;
        }

        .g-portfolio__object--twothirds .g-portfolio__object__images__imac:before {
            content: "";
            background: #868686;
            position: absolute;
            width: 30%;
            height: 2%;
            display: block;
            bottom: -11%;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            z-index: -1;
            border-radius: 50%/40%;
        }

        .g-portfolio__object--full .g-portfolio__object__images__imac {
            position: absolute;
            background: white;
            left: 6.5%;
            bottom: 17%;
            width: 38%;
            height: 71%;
            border-radius: 2%/4%;
            -webkit-box-shadow: 0px 3px 5px 3px rgba(1,1,1,0.5);
                    box-shadow: 0px 3px 5px 3px rgba(1,1,1,0.5);
        }

        .g-portfolio__object--full .g-portfolio__object__images__imac__wrapper {
            width: 96%;
            height: 93%;
            margin: 2% auto;
            position: relative;
        }

        .g-portfolio__object__images__imac__wrapper__image {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 1%;
            -webkit-box-shadow: inset 0 0 3px 1px rgba(1,1,1,.3);
                    box-shadow: inset 0 0 3px 1px rgba(1,1,1,.3);
        }

        .g-portfolio__object--full .g-portfolio__object__images__imac:after {
            content: "";
            background: #e2e2e2;
            -webkit-box-shadow: inset 0px -14px 11px 20px rgb(206, 206, 206);
                    box-shadow: inset 0px -14px 11px 20px rgb(206, 206, 206);
            position: absolute;
            width: 30%;
            height: 10%;
            display: block;
            bottom: -10%;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            -webkit-clip-path: polygon(25% 0, 0 100%, 100% 100%, 75% 0);
                    clip-path: polygon(25% 0, 0 100%, 100% 100%, 75% 0);
            shape-outside: polygon(25% 0, 0 100%, 100% 100%, 75% 0);
            z-index: -1;
        }

        .g-portfolio__object--full .g-portfolio__object__images__imac:before {
            content: "";
            background: #868686;
            position: absolute;
            width: 30%;
            height: 2%;
            display: block;
            bottom: -11%;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            z-index: -1;
            border-radius: 50%/40%;
        }

        /* Animations */

        @-webkit-keyframes scale {
            0% { -webkit-transform: scale(1); transform: scale(1) }
            80% { -webkit-transform: scale(1.6); transform: scale(1.6) }
            100% { -webkit-transform: scale(1.5); transform: scale(1.5) }
        }

        @keyframes scale {
            0% { -webkit-transform: scale(1); transform: scale(1) }
            80% { -webkit-transform: scale(1.6); transform: scale(1.6) }
            100% { -webkit-transform: scale(1.5); transform: scale(1.5) }
        }

        @-webkit-keyframes unscale {
            0% { -webkit-transform: scale(1.5); transform: scale(1.5) }
            100% { -webkit-transform: scale(1); transform: scale(1) }
        }

        @keyframes unscale {
            0% { -webkit-transform: scale(1.5); transform: scale(1.5) }
            100% { -webkit-transform: scale(1); transform: scale(1) }
        }

        @-webkit-keyframes moveright {
            0% { -webkit-transform: translateX(0%); transform: translateX(0%); }
            75% { -webkit-transform: translateX(58%); transform: translateX(58%); }
            100% { -webkit-transform: translateX(55%); transform: translateX(55%); }
        }

        @keyframes moveright {
            0% { -webkit-transform: translateX(0%); transform: translateX(0%); }
            75% { -webkit-transform: translateX(58%); transform: translateX(58%); }
            100% { -webkit-transform: translateX(55%); transform: translateX(55%); }
        }

        @-webkit-keyframes moveleft {
            0% { -webkit-transform: translateX(55%); transform: translateX(55%); }
            75% { -webkit-transform: translateX(-2%); transform: translateX(-3%); }
            100% { -webkit-transform: translateX(0%); transform: translateX(0%); }
        }

        @keyframes moveleft {
            0% { -webkit-transform: translateX(55%); transform: translateX(55%); }
            75% { -webkit-transform: translateX(-2%); transform: translateX(-3%); }
            100% { -webkit-transform: translateX(0%); transform: translateX(0%); }
        }

        .g-portfolio__object__images__ipad {
            -webkit-animation: unscale .2s normal forwards ease-in-out;
                    animation: unscale .2s normal forwards ease-in-out;
            z-index: 1;
        }

        .g-portfolio__object__images__ipad:hover,
        .g-portfolio__object__images__ipad:focus {
            -webkit-animation: scale .8s normal forwards ease-in-out;
                    animation: scale .8s normal forwards ease-in-out;
            z-index: 2;
        }

        .g-portfolio__object__images__iphone {
            -webkit-animation: unscale .2s normal forwards ease-in-out;
                    animation: unscale .2s normal forwards ease-in-out;
            z-index: 1;
        }

        .g-portfolio__object__images__iphone:hover,
        .g-portfolio__object__images__iphone:focus {
            -webkit-animation: scale .8s normal forwards ease-in-out;
                    animation: scale .8s normal forwards ease-in-out;
            z-index: 2;
        }

        .g-portfolio__object__images__imac {
            -webkit-animation: moveleft .2s normal forwards ease-in-out;
                    animation: moveleft .2s normal forwards ease-in-out;
            z-index: 0;
        }

        .g-portfolio__object__images__imac:hover,
        .g-portfolio__object__images__imac:focus {
            -webkit-animation: moveright .8s normal forwards ease-in-out;
                    animation: moveright .8s normal forwards ease-in-out;
            z-index: 0;
        }

        .g-portfolio__object__images__imac:after {
            z-index: -1;
        }

        /* Media queries */
        @media screen and (max-width: 650px) {
            .g-portfolio {
                display: block;
                margin: 0;
            }

            .g-portfolio__object {
                margin-right: 0;
            }

            .g-portfolio-container {
                padding: 0;;
            }

            .g-portfolio__object__link {
                position: unset;
            }

            .g-portfolio__object__content {
                margin-bottom: 2em;
            }

            .g-portfolio__object__images:after {
                padding-bottom: 31.034% !important;
            }
            .g-portfolio__object .g-portfolio__object__images__ipad {
                width: 17%;
            }
            .g-portfolio__object .g-portfolio__object__images__iphone {
                width: 6%;
                left: 19%;
            }
            .g-portfolio__object .g-portfolio__object__images__imac {
                width: 38%;
                left: 10%;
            }
        }
</style>
