Twikito

@function dash-join($args...) {
	$result: null;
	$first-add: true;
	$glue: '-';

	@for $i from 1 through length($args) {
		$e: nth($args, $i);

		@if $e != null and $e != '' {
			$result: if($i == 1 or $first-add == true, #{$e}, #{$result}#{$glue}#{$e});

Twikito

@function dash-join($args...) {
	$result: null;
	$first-add: true;
	$glue: '-';

	@for $i from 1 through length($args) {
		$e: nth($args, $i);

		@if $e != null and $e != '' {
			$result: if($i == 1 or $first-add == true, #{$e}, #{$result}#{$glue}#{$e});

Twikito

@function dash-join($args...) {
	$result: null;
	$first-add: true;
	$glue: '-';

	@for $i from 1 through length($args) {
		$e: nth($args, $i);

		@if $e != null and $e != '' {
			$result: if($i == 1 or $first-add == true, #{$e}, #{$result}#{$glue}#{$e});

Twikito

$queries: (
	default: 'all',
	sm: '>xsmall',
	md: '>small',
	lg: '>medium',
	xl: '>large',
);

@mixin responsive-classes($classname) {
	@each $breakpointname, $query in $queries {

Twikito

myCloud: HTML and CSS first practice for students

You'll have to code this mockup with HTML and CSS according to the state of the art, with responsive adaptations for mobile.

You can't use class, identifier or attribute selectors, neither images or javascript.

Pay particular attention to semantics.

Twikito

$global-gutters: 2rem;
$wrapper-width : 96rem;