Skip to content

Instantly share code, notes, and snippets.

@englishextra

englishextra/index.html

Created September 7, 2018 14:18
Show Gist options
  • Save englishextra/5ac4158584c8c5775beab60879cfc64f to your computer and use it in GitHub Desktop.
Save englishextra/5ac4158584c8c5775beab60879cfc64f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. englishextra created this gist Sep 7, 2018.
    637 changes: 637 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,637 @@

    <html lang="en-us"></html>
    <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" cntnt="IE=edge"/>
    <title></title>
    <meta name="viewport" cntnt="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"/>
    <meta name="description"/>
    <link rel="stylesheet" href="css/.min.css"/>
    <link rel="stylesheet" href="css/theme.min.css"/>
    <style id="jsbin-css">
    /**
    * driveway.css - pure CSS masonry layouts aid.
    */
    .ml {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    position: relative;
    }
    .ml--fcs .ml-pnl {
    position: relative;
    }
    .ml--fcs .ml-pnl:hover {
    z-index: 3;
    }
    .ml--fcs .ml-pnl:hover ~ .ml__fcs-crtn {
    display: block;
    }
    .ml__fcs-crtn {
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.75;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
    }
    .ml * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    @media (min-width: 768px) {
    .ml {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    }
    }
    @media (min-width: 1200px) {
    .ml {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    }
    }
    .ml-pnl {
    margin: 0;
    padding: 5px;
    }
    .ml-pnl--fcs {
    position: relative;
    }
    .ml-pnl--fcs:hover {
    z-index: 3;
    }
    .ml-pnl--fcs:hover ~ .ml__fcs-crtn {
    display: block;
    }
    .ml-pnl--pls {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-transition: -webkit-transform 0.25s ease 0s;
    transition: -webkit-transform 0.25s ease 0s;
    transition: transform 0.25s ease 0s;
    transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
    }
    .ml-pnl--pls:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
    }
    @media (min-width: 768px) {
    .ml-pnl {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    }
    }
    .ml-pnl__cntnt {
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    width: 100%;
    }
    .ml-pnl__cntnt--img {
    max-width: 100%;
    padding: 0;
    }
    .ml-flp {
    -webkit-perspective: 1000;
    perspective: 1000;
    }
    .ml-flp:hover .ml-flp__cntnt {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    .ml-flp--md {
    height: 300px;
    }
    .ml-flp__pnl {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    }
    .ml-flp__pnl--frnt {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 2;
    }
    .ml-flp__pnl--bck {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    .ml-flp__cntnt {
    height: 100%;
    overflow: visible;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    }
    .ml-clstr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    }
    .ml-clstr--vrt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr--vrt {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    }
    }
    .ml-clstr--hrz {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    .ml-clstr__sgmnt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    }
    .ml-clstr__sgmnt--rw {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr__sgmnt--rw {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    }
    }
    .ml-clstr__sgmnt--clmn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr__sgmnt--hlf {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    }
    .ml-clstr__sgmnt--qrt {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    }
    }

    /**
    * Color styles
    */
    .tx--white {
    color: #fff;
    }
    .bg--red {
    background-color: #e74c3c;
    }
    .bg--green {
    background-color: #26a65b;
    }
    .bg--purple {
    background-color: #8e44ad;
    }
    .bg--blue {
    background-color: #1e8bc3;
    }
    img {
    max-height: 300px;
    background-color: #f93;
    }
    </style>
    </head>
    <body>
    <div class="ml">
    <div class="ml-pnl ml-flp--md ml-flp">
    <div class="ml-pnl__cntnt ml-flp__cntnt"><img src="img/photo-1.jpg" class="ml-flp__pnl ml-flp__pnl--frnt"/>
    <div class="ml-flp__pnl ml-flp__pnl--bck bg--green">
    <p>Here is a flpped image...</p>
    </div>
    </div>
    </div>
    <div class="ml-pnl">
    <div class="ml-pnl__cntnt tx--white bg--green">
    <h1>Here is a masonry layout.</h1>
    </div>
    </div>
    <div class="ml-pnl ml-clstr ml-clstr--hrz">
    <div class="ml-clstr__sgmnt ml-clstr__sgmnt--rw">
    <div class="ml-pnl ml-clstr__sgmnt"><img src="img/photo-2.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div>
    </div>
    <div class="ml-clstr__sgmnt ml-clstr__sgmnt--rw">
    <div class="ml-pnl ml-clstr__sgmnt ml-clstr__sgmnt--hlf"><img src="img/photo-1.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div>
    <div class="ml-pnl ml-clstr__sgmnt">
    <div class="ml-pnl__cntnt bg--red tx--white">
    <p>Some cool pics.</p>
    </div>
    </div>
    </div>
    </div>
    <div class="ml-pnl">
    <div class="ml-pnl__cntnt tx--white bg--purple">
    <h3>That's pretty cool, thanks for showing me.</h3>
    </div>
    </div>
    <div class="ml-pnl ml-clstr ml-clstr--vrt">
    <div class="ml-clstr__sgmnt ml-clstr__sgmnt--clmn ml-clstr__sgmnt--hlf">
    <div class="ml-pnl ml-clstr__sgmnt"><img src="img/photo-2.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div>
    </div>
    <div class="ml-clstr__sgmnt ml-clstr__sgmnt--clmn">
    <div class="ml-pnl ml-clstr__sgmnt">
    <div class="ml-pnl__cntnt bg--blue tx--white">
    <p>This is an image, it's quite nice.</p>
    </div>
    </div>
    <div class="ml-pnl ml-clstr__sgmnt">
    <div class="ml-pnl__cntnt bg--blue tx--white"><a>Click here to find out more.</a></div>
    </div>
    </div>
    </div>
    <div class="ml-pnl ml-pnl--fcs">
    <div class="ml-pnl__cntnt tx--white bg--green">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex.</p>
    </div>
    </div>
    <div class="ml-pnl">
    <div class="ml-pnl__cntnt tx--white bg--red">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend. Pellentesque lorem elit, dignissim interdum massa id, malesuada rutrum ligula. Suspendisse tempor quis mauris eu facilisis. Phasellus non volutpat diam, non dapibus ligula. Ut non molestie ex, nec sagittis mi. Curabitur suscipit tellus id dolor pretium blandit. Cras tristique tristique pharetra.</p>
    </div>
    </div>
    <div class="ml-pnl">
    <div class="ml-pnl__cntnt tx--white bg--green">
    <h2>Some post about something</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend.</p>
    </div>
    </div>
    <div class="ml-pnl"><img src="img/photo-1.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div>
    <div class="ml-pnl ml-pnl--fcs">
    <div class="ml-pnl__cntnt tx--white bg--blue">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex.</p>
    </div>
    </div>
    <div class="ml-pnl ml-pnl--pls"><img src="img/photo-1.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div>
    <div class="ml__fcs-crtn"></div>
    </div>

    <script id="jsbin-source-html" type="text/html">html(lang="en-us")
    head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", cntnt="IE=edge")
    title= name
    meta(name="viewport", cntnt="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0")
    meta(name="description", cntnt= description)
    link(rel="stylesheet", href="css/#{name}.min.css")
    link(rel="stylesheet", href="css/theme.min.css")
    body
    .ml
    .ml-pnl.ml-flp--md.ml-flp
    .ml-pnl__cntnt.ml-flp__cntnt
    img.ml-flp__pnl.ml-flp__pnl--frnt(src="img/photo-1.jpg")
    .ml-flp__pnl.ml-flp__pnl--bck.bg--green
    p Here is a flpped image...
    .ml-pnl
    .ml-pnl__cntnt.tx--white.bg--green
    h1 Here is a masonry layout.
    .ml-pnl.ml-clstr.ml-clstr--hrz
    .ml-clstr__sgmnt.ml-clstr__sgmnt--rw
    .ml-pnl.ml-clstr__sgmnt
    img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-2.jpg")
    .ml-clstr__sgmnt.ml-clstr__sgmnt--rw
    .ml-pnl.ml-clstr__sgmnt.ml-clstr__sgmnt--hlf
    img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
    .ml-pnl.ml-clstr__sgmnt
    .ml-pnl__cntnt.bg--red.tx--white
    p.
    Some cool pics.
    .ml-pnl
    .ml-pnl__cntnt.tx--white.bg--purple
    h3 That's pretty cool, thanks for showing me.
    .ml-pnl.ml-clstr.ml-clstr--vrt
    .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn.ml-clstr__sgmnt--hlf
    .ml-pnl.ml-clstr__sgmnt
    img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-2.jpg")
    .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn
    .ml-pnl.ml-clstr__sgmnt
    .ml-pnl__cntnt.bg--blue.tx--white
    p.
    This is an image, it's quite nice.
    .ml-pnl.ml-clstr__sgmnt
    .ml-pnl__cntnt.bg--blue.tx--white
    a Click here to find out more.
    .ml-pnl.ml-pnl--fcs
    .ml-pnl__cntnt.tx--white.bg--green
    p.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex.
    .ml-pnl
    .ml-pnl__cntnt.tx--white.bg--red
    p.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend. Pellentesque lorem elit, dignissim interdum massa id, malesuada rutrum ligula. Suspendisse tempor quis mauris eu facilisis. Phasellus non volutpat diam, non dapibus ligula. Ut non molestie ex, nec sagittis mi. Curabitur suscipit tellus id dolor pretium blandit. Cras tristique tristique pharetra.
    .ml-pnl
    .ml-pnl__cntnt.tx--white.bg--green
    h2 Some post about something
    p.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend.
    .ml-pnl
    img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
    .ml-pnl.ml-pnl--fcs
    .ml-pnl__cntnt.tx--white.bg--blue
    p.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex.
    .ml-pnl.ml-pnl--pls
    img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
    .ml__fcs-crtn
    </script>

    <script id="jsbin-source-css" type="text/css">/**
    * driveway.css - pure CSS masonry layouts aid.
    */
    .ml {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    position: relative;
    }
    .ml--fcs .ml-pnl {
    position: relative;
    }
    .ml--fcs .ml-pnl:hover {
    z-index: 3;
    }
    .ml--fcs .ml-pnl:hover ~ .ml__fcs-crtn {
    display: block;
    }
    .ml__fcs-crtn {
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.75;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
    }
    .ml * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    @media (min-width: 768px) {
    .ml {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    }
    }
    @media (min-width: 1200px) {
    .ml {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    }
    }
    .ml-pnl {
    margin: 0;
    padding: 5px;
    }
    .ml-pnl--fcs {
    position: relative;
    }
    .ml-pnl--fcs:hover {
    z-index: 3;
    }
    .ml-pnl--fcs:hover ~ .ml__fcs-crtn {
    display: block;
    }
    .ml-pnl--pls {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-transition: -webkit-transform 0.25s ease 0s;
    transition: -webkit-transform 0.25s ease 0s;
    transition: transform 0.25s ease 0s;
    transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
    }
    .ml-pnl--pls:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
    }
    @media (min-width: 768px) {
    .ml-pnl {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    }
    }
    .ml-pnl__cntnt {
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    width: 100%;
    }
    .ml-pnl__cntnt--img {
    max-width: 100%;
    padding: 0;
    }
    .ml-flp {
    -webkit-perspective: 1000;
    perspective: 1000;
    }
    .ml-flp:hover .ml-flp__cntnt {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    .ml-flp--md {
    height: 300px;
    }
    .ml-flp__pnl {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    }
    .ml-flp__pnl--frnt {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 2;
    }
    .ml-flp__pnl--bck {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    .ml-flp__cntnt {
    height: 100%;
    overflow: visible;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    }
    .ml-clstr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    }
    .ml-clstr--vrt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr--vrt {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    }
    }
    .ml-clstr--hrz {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    .ml-clstr__sgmnt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    }
    .ml-clstr__sgmnt--rw {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr__sgmnt--rw {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    }
    }
    .ml-clstr__sgmnt--clmn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr__sgmnt--hlf {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    }
    .ml-clstr__sgmnt--qrt {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    }
    }

    /**
    * Color styles
    */
    .tx--white {
    color: #fff;
    }
    .bg--red {
    background-color: #e74c3c;
    }
    .bg--green {
    background-color: #26a65b;
    }
    .bg--purple {
    background-color: #8e44ad;
    }
    .bg--blue {
    background-color: #1e8bc3;
    }
    img {
    max-height: 300px;
    background-color: #f93;
    }
    </script>
    </body>
    240 changes: 240 additions & 0 deletions jsbin.loronibali.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,240 @@
    /**
    * driveway.css - pure CSS masonry layouts aid.
    */
    .ml {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    position: relative;
    }
    .ml--fcs .ml-pnl {
    position: relative;
    }
    .ml--fcs .ml-pnl:hover {
    z-index: 3;
    }
    .ml--fcs .ml-pnl:hover ~ .ml__fcs-crtn {
    display: block;
    }
    .ml__fcs-crtn {
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.75;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
    }
    .ml * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    @media (min-width: 768px) {
    .ml {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    }
    }
    @media (min-width: 1200px) {
    .ml {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    }
    }
    .ml-pnl {
    margin: 0;
    padding: 5px;
    }
    .ml-pnl--fcs {
    position: relative;
    }
    .ml-pnl--fcs:hover {
    z-index: 3;
    }
    .ml-pnl--fcs:hover ~ .ml__fcs-crtn {
    display: block;
    }
    .ml-pnl--pls {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-transition: -webkit-transform 0.25s ease 0s;
    transition: -webkit-transform 0.25s ease 0s;
    transition: transform 0.25s ease 0s;
    transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
    }
    .ml-pnl--pls:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
    }
    @media (min-width: 768px) {
    .ml-pnl {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    }
    }
    .ml-pnl__cntnt {
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    width: 100%;
    }
    .ml-pnl__cntnt--img {
    max-width: 100%;
    padding: 0;
    }
    .ml-flp {
    -webkit-perspective: 1000;
    perspective: 1000;
    }
    .ml-flp:hover .ml-flp__cntnt {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    .ml-flp--md {
    height: 300px;
    }
    .ml-flp__pnl {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    }
    .ml-flp__pnl--frnt {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 2;
    }
    .ml-flp__pnl--bck {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    .ml-flp__cntnt {
    height: 100%;
    overflow: visible;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    }
    .ml-clstr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    }
    .ml-clstr--vrt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr--vrt {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    }
    }
    .ml-clstr--hrz {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    .ml-clstr__sgmnt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    }
    .ml-clstr__sgmnt--rw {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr__sgmnt--rw {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    }
    }
    .ml-clstr__sgmnt--clmn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
    @media (min-width: 768px) {
    .ml-clstr__sgmnt--hlf {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    }
    .ml-clstr__sgmnt--qrt {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    }
    }

    /**
    * Color styles
    */
    .tx--white {
    color: #fff;
    }
    .bg--red {
    background-color: #e74c3c;
    }
    .bg--green {
    background-color: #26a65b;
    }
    .bg--purple {
    background-color: #8e44ad;
    }
    .bg--blue {
    background-color: #1e8bc3;
    }
    img {
    max-height: 300px;
    background-color: #f93;
    }