* {
    box-sizing: border-box;
  }
  
  /* Grid measurements:
   *
   *   960px wide including 12 gutters (half gutters on both edges)
   *
   *   60px columns (12)
   *   20px gutters (two half-gutters + 11 full gutters, so 12 total)
   *
   *
   *   For smaller screens, we always want 20px of padding on either side,
   *   so 960 + 20 + 20 => 1000px
   *
   **/
  
  
  .row{
    max-width: 1000px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
  }
  
  /* Clearfix */
  .row::before,
  .row::after{
    display: table;
    content: '';
  }
  
  .row::after{
    clear: both;
  }
  
  .col-3, .col-4, .col-6, .col-12 {
    float: left;
  
    /* Gutters:
     * Each column is padded by half-a-gutter on each side,
     *
     * Half a gutter is 10px, 10/960 (context) = 1.041666%
     *
     */
    padding-left: 1.04166666%;
    padding-right: 1.04166666%;
  }
  
  
  
  /* Mobile defaults */
  .col-3, .col-4, .col-6, .col-12 {
    width: 100%;
  }

  img{
    width:295px;
  }
  
  
  /* Non-mobile, grid */
  @media only screen and (min-width: 640px) {
    /* 3 columns, 3/12 in % */
    .col-3 {
      width: 25%;
    }
  
    /* 4 columns, 4/12 in % */
    .col-4 {
      width: 33.33%;
    }
  
    /* 6 columns 6/12 in % */
    .col-6 {
      width: 50%;
    }
  
    /* 12 columns, 12/12 */
    .col-12 {
      width: 100%;
    }
  
    img{
      width:400px;
    }

  }