problemi/frontend/styles/main.scss

// Normalize

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
}

// Typography

p {
    margin: 0;
}

$base-font-size: 16px;
$heading-scale: 1.25;

@function pow($number, $exponent) {
    $value: 1;

    @if $exponent > 0 {
        @for $i from 1 through $exponent {
            $value: $value * $number;
        }
    }

    @return $value;
}

@for $i from 1 through 4 {
    h#{$i} {
        margin: 0;

        $factor: pow($heading-scale, 4 - $i);
        font-size: $base-font-size * $factor;
        font-weight: 500;

        &:not(:first-child) {
            padding-top: 0.5rem * $factor;
        }

        line-height: 1;
    }
}

$device-s-width: 640px;

// Not on mobile
@media screen and (min-width: $device-s-width) and (pointer: fine) {
    // ...
}

// On mobile
@media screen and (max-width: $device-s-width), (pointer: coarse) {
    // ...
}