/* ————————————————————————*/
/* Stylesheet for the record
/* Responsiveness
/* ————————————————————————*/

@media (min-width: 1600px)  {
	.three-columns {
		column-count: 4;
	}
	.two-columns {
		column-count: 3;
	}
	.dumpling:not(.huge), .dumpling:not(.huge) * {
		font-size: 30px;
	}
	.huge {
		font-variation-settings: "wdth" -60, 'ntch' 100;
	}
	.home-title {
		font-variation-settings: "wdth" -100, 'ntch' 100;
	}
	#header + * {
		margin-top: calc( 40px + var(--m) * 2);
	}
	.invert {
		width: 30px;
		height: 30px;
	}
	.invert-half {
		width: 15px;
		height: 30px;
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
	}
	.slick-prev:before,
	.slick-next:after {
		font-size: 40px;
	}
}

@media (min-width: 788px) and (max-width: 1280px) {
	.col-2 {
		width: calc(100% / 2 - 10px);
	}
	.col-3 {
		width: calc(100% / 3 - 10px);
	}
	.col-5 {
		width: calc(100%  - 10px);
	}
	.three-columns {
		column-count: 2;
	}
	.two-columns {
		column-count: 2;
	}

	.dumpling:not(.huge), .dumpling:not(.huge) * {
		font-size: 30px;
	}
	.huge {
		font-variation-settings: "wdth" -100, 'ntch' 100;
	}
	.home-title {
		font-variation-settings: "wdth" -100, 'ntch' 100;
	}
	#header + * {
		margin-top: calc( 30px + var(--m) * 2);
	}
	.regular {
		font-size: 30px;
	}

	.invert {
		width: 30px;
		height: 30px;
	}
	.invert-half {
		width: 15px;
		height: 30px;
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
	}
	.slick-prev:before,
	.slick-next:after {
		font-size: 30px;
	}

	.flex-container {
		flex-direction: column;
	}
	.mobile-first {
		order: -1;
		width: 100%;
	}
}



@media (max-width: 787px) {
	html, body {
		font-size: 16px;
	}
	.dumpling:not(.huge), .dumpling:not(.huge) * {
		font-size: 24px;
	}
	.huge {
		font-variation-settings: "wdth" -100, 'ntch' 100;
	}
	.home-title {
		font-variation-settings: "wdth" -100, 'ntch' 100;
	}
	#header + * {
		margin-top: calc( 24px + var(--m) * 2);
	}
	.tags {
		position: relative;
	}
	.tag:not(.tag-in-text) {
		float: left;
		margin-bottom: var(--m);
		margin-left: calc(var(--m)/2);
		margin-right: calc(var(--m)/2);
	}
	.project-title {
		margin-bottom: var(--m);
	}
	.regular {
		font-size: 24px;
	}
	.invert {
		width: 24px;
		height: 24px;
	}
	.invert-half {
		width: 12px;
		height: 24px;
		border-top-left-radius: 24px;
		border-bottom-left-radius: 24px;
	}
	.slick-prev:before,
	.slick-next:after {
		font-size: 24px;
	}
	.header-all {
		line-height: 0.9;
		height: 27px;
		width: 27px;
	}
	.two-columns {
		column-count: 1;
	}
	.three-columns {
		column-count: 1;
	}
	.flex-container {
		flex-direction: column;
	}
	.col {
/*		margin: calc(var(--m) / 2);*/
	}
	.col-3 {
		width: calc(100% / 2 );
	}
	.col-2, .col-4 {
		width: calc(100%  );
	}
	.col-6 {
		width: calc(100%  );
	}
	.col-6-1 {
		width: calc(25%  );
	}
	.col-6-3 {
		width: calc(100%  );
	}
	.col-5 {
		width: calc(100%  );
	}
	.thumbs {
		width: calc(100% );
	}

	.textblock {
		scroll-margin-left:0 ;
	}
	.small-padding {
/*		padding: calc(var(--m)/2) var(--m);*/
	}
	.mobile-first {
		order: -1;
		width: 100%;
	}
	.mobile-only  {
		display: inline;
	}
	.hide-mobile {
		display: none;
	}
	.sticky {
		top: calc(var(--m) / 2);
	}

	.special-button {
		width: 100%;
		max-width: 100%;;

	}
	.slider-toggle:before {
	  height: 16px;
	  width: 16px;
	  left: 2px;
	  bottom: 2px;
	}
	input:checked + .slider-toggle:before {
	  -webkit-transform: translateX(134px);
	  -ms-transform: translateX(134px);
	  transform: translateX(134px);
	}
	.time {
		width: 50px;
	}
	.desc {
		width: calc(100% - 50px);
	}
}