Daniel Box dbox

// an element that needs to break at exactly 540px
.item
  width: 100%
  
  @media(width >= 540px)
    width: 50%

	<!-- typekit -->
	<script>
	(function(d) {
	var config = {
	kitId: 'ldj3frj',
	scriptTimeout: 3000,
	async: true
	},
	h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f\|\|a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
	})(document);

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>National Bankcard</title>
	<style type="text/css">

	(function(d) {
	const config = {
	kitId: '{{typeKitId}}',
	scriptTimeout: 3000,
	async: true
	},
	h = d.documentElement,
	t = setTimeout(function() {
	h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
	}, config.scriptTimeout),

	/* some pre-defined custom properties in my code */
	:root {
	--default-transition-duration: .2s;
	--default-easing: ease-out;
	}

	/* define mixin */
	@define mixin transition(--transition-property: all, --transition-duration: var(--default-transition-duration), --easing: var(--default-easing) ) {
	transition: --transition-property --transition-duration --easing;
	}