@import "compass/reset";

.responsive-container {
  overflow: hidden;

  .column-element {
    display: block;
    &:last-child:after {
      visibility: hidden;
      content: ".";
      display: block;
      height: 0;
      clear: both;
    }

  }
}

@media (min-width: 600px) {
  .responsive-container.col-3-2-1 {
    .column-element {
      width: 33.333%;
      &:nth-child(3n+1),
      &:nth-child(3n+2) {
        float: left;
      }
      &:nth-child(3n+3) {
        float: right;
      }
    }
  }
}

@media (max-width: 600px) {
  .responsive-container.col-3-2-1 {
    .column-element {
      width: 50%;
      &:nth-child(2n+1) {
        float: left;
      }
      &:nth-child(2n+2) {
        float: right;
      }
    }
  }
}


@media (max-width: 400px) {
  .responsive-container.col-3-2-1 {
    .column-element {
      width: 100%;
      &:nth-child(1n) {
        float: none;
      }
    }
  }
}