Cacher is the code snippet organizer for pro developers

/*
* 100vw = 100% of viewport width
* 100vh = 100% of viewport height
* 100vmin = 100% of smallest viewport dimension
* 100vmax = 100% of largest viewport dimension
*/

/*
* Fixed-ratio cards
*/
.stack {
  display: flex;
  flex-wrap: wrap;
}

.stack__element {
  flex: 50vw;
  height: 50vw;
}

/*
* Full-height elements
*/
.image {
  height: 100vh;
  width: auto;
}

/*
* Keeping an element shorter than the screen
*/
.shorten-me {
  max-height: 90vh;
}

/*
* Scaling text
*/
html {
  font-size: 16px;
}

h1 {
  font-size: calc(100% + 5vw); 
}

/*
* Breaking out of the container
*/
.container {
  max-width: 1024px;
  margin: 0 auto;
}

.breakout { 
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw; 
}