CSS

aspect-ratio.css

.header {
    height: 100vh;
}

@media (max-aspect-ratio: 10 / 8)
  .header {
      height: auto;
  }
}

font-face.css

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto/roboto-regular.woff2") format("woff2"), 
          url("../fonts/roboto/roboto-regular.woff") format('woff');
}

nth-last-line.css

.item:nth-child(4n+1):nth-last-child(-n+4),
.item:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
  margin-bottom: 0;
  
  border-bottom: none;
}

responsive-video.css

div.video
	iframe.video_meta

.video {
	position: relative;
  
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
  
  background-color: #000;
}

.video_meta {
	position: absolute;
	top: 0;
	left: 0;
  
	width: 100%;
	height: 100%;
  
	border: none;
}

retina.css

.el {
  background-image: url('image@1x.jpg');
  background-size: 200px;
}

@media (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .el {
    background-image: url('image@2x.jpg');
    background-size: 400px;
  }
}

sr-only.css

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;

    border: 0;

    clip: rect(0,0,0,0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
}