uglymediaquery

uglymediaquery.less

.hero {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #EBEBE8;
  position: relative;
  margin: 0 auto 0 auto;
  height: 525px;
  min-width: 960px;
  max-width: 1680px;
  overflow: hidden;
}

.anti-hero {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #EBEBE8;
  min-width: 960px;
  max-width: 1680px;
  overflow: hidden;
}

.wishes-it-was-a-hero {
  background-color: #EBEBE8;
  position: relative;
  margin: 0 auto 0 auto;
  height: 525px;
  min-width: 960px;
  max-width: 1680px;
  overflow: hidden;
}

@media @viewport-tiny {
  .hero {
    height: auto;
    min-width: inherit;
    max-width: none;
    width: 100%;
  }

  .anti-hero {
    background-color: blue;
  }

  .wishes-it-was-a-hero {
    max-width: 50px;
  }
}

@media @viewport-narrow {
  .hero {
    height: auto;
    min-width: inherit;
    max-width: none;
    width: 100%;
  }

  .anti-hero {
    background-color: yellow;
  }

  .wishes-it-was-a-hero {
    max-width: 150px;
  }
}

@media @viewport-medium {
  .hero {
    height: 407px;
    min-width: 767px;
  }

  .anti-hero {
    background-color: green;
  }

  .wishes-it-was-a-hero {
    max-width: 350px;
  }
}