Untitled


<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">


  <style>


html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

article, aside, figure, footer, header, main, nav, section, img {
  display: block; }

img,
object,
embed {
  max-width: 100%;
  height: auto; }


html {
  font: normal 62.5%/1.5 serif; }

body {
  font-size: 1.6rem;
  color: #646464;
  font-family: 'Lora', Georgia, serif; }

a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #ca5250;
  text-decoration: none; }
  a:hover, a:focus {
    text-decoration: underline; }

body {
  background: #f6f6f6; }

.wrapper {
  max-width: 96rem;
  margin: 8rem auto 2rem; }

.image-grid {
  position: relative; }
  .image-grid a {
    float: left;
    display: block;
    position: relative; }
    .image-grid a:hover, .image-grid a:focus {
      opacity: 0.8; }
    .image-grid a:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      border: 4px solid #f6f6f6;
      pointer-events: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      @media (max-width: 65em) {
        .image-grid a:before {
          border: 2px solid #f6f6f6; } }
      @media (max-width: 40em) {
        .image-grid a:before {
          border: 1px solid #f6f6f6; } }
    .image-grid a:nth-child(6n+1), .image-grid a:nth-child(6n+2), .image-grid a:nth-child(6n+6) {
      width: 50%; }
    .image-grid a:nth-child(6n+3), .image-grid a:nth-child(6n+4), .image-grid a:nth-child(6n+5) {
      width: 25%; }
    .image-grid a:nth-child(6n+5), .image-grid a:nth-child(6n+6) {
      margin-top: -25%; }
    .image-grid a:nth-child(6n+6) {
      margin-left: 25%; }


  </style>

</head>

<body>


    <div class="wrapper">

        <main class="main" id="main">

            <section class="image-grid group">

                <a href="">

                                    <img width="960" height="960" src="http://tinktank.in/demo/barber-shop/wp-content/uploads/2014/01/highway-960x960.jpg" class="attachment-1x1" alt="highway"></a>

                <a href="">

                                    <img width="960" height="480" src="http://tinktank.in/demo/barber-shop/wp-content/uploads/2014/01/logged-960x480.jpg" class="attachment-2x1" alt="logged"></a>

                <a href="">

                                    <img width="960" height="960" src="http://tinktank.in/demo/barber-shop/wp-content/uploads/2014/01/tunnel-960x960.jpg" class="attachment-1x1" alt="tunnel"></a>

                <a href="">

                                    <img width="480" height="960" src="http://tinktank.in/demo/barber-shop/wp-content/uploads/2014/01/drops-480x960.jpg" class="attachment-1x2" alt="drops"></a>

                <a href="">

                                    <img width="960" height="960" src="http://tinktank.in/demo/barber-shop/wp-content/uploads/2014/01/traaain-960x960.jpg" class="attachment-1x1" alt="traaain"></a>

                <a href="">

                                    <img width="960" height="480" src="http://tinktank.in/demo/barber-shop/wp-content/uploads/2014/01/bike-rack-960x480.jpg" class="attachment-2x1" alt="bike-rack"></a>


            </section>

        </main>

    </div>

</body>

</html>