<a class="hero" href="//www.silvestarbistrovic.from.hr" target="_blank">
  <div class="hero__content">
    <h1 class="hero__text">
      Star Bist
    </h1>
    <div class="hero__icon">
      <svg class="sb" xmlns="http://www.w3.org/2000/svg" width="360" height="270" viewBox="0 0 360 270">
        <g fill="none" transform="translate(30 30)">
          <path fill="#fff" d="M3.07763301e-14,0 L0,209.912817 L50.532797,209.912817 L50.5328251,209.912817 C106.349811,209.912817 151.598419,178.990695 151.598419,140.846325 C151.598419,111.069621 124.02456,85.6940533 85.3744302,75.9937897 C99.3962119,68.0764801 108.284585,56.3072221 108.284585,43.1665578 C108.284585,19.3263262 79.0290143,0 42.9404389,0 C41.0537192,0 39.1856755,0.0528231896 37.3395121,0.156352968 L37.3395121,0 L3.07763301e-14,0 Z"/>
          <path fill="#fff" d="M188.849985,118.598891 L139.771869,185.677176 C155.949814,200.393757 181.704869,209.912817 210.713291,209.912817 C259.686331,209.912817 299.386825,182.782181 299.386825,149.314846 C299.386825,121.970526 272.88426,98.8563488 236.475406,91.3139257 L285.553522,24.2356413 C269.375577,9.51905998 243.620522,0 214.6121,0 C165.63906,0 125.938567,27.1306357 125.938567,60.5979709 C125.938567,87.9422914 152.441131,111.056468 188.849985,118.598891 Z"/>
        </g>
      </svg>
    </div>
  </div>
</a>

$color1: #e01258;
$color2: #ec3211;

$mq-mobile: 320px;
$mq-desktop: 960px;

$browser-context: 16px;

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em;
}

@mixin css-locks($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{em($min-value)} + #{strip-unit($max-value - $min-value)} * (100vw - #{em($min-vw)}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}

body {
  min-height: 100vh;
  @include css-locks(font-size, $mq-mobile, $mq-desktop, 14px, 16px);
}

.hero {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  
  &:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 5em;
    box-shadow: 0px 0px 10px 10px rgba(1, 1, 1, 0.45);
    transform: skew(0, -1deg) translate(0,100%);
    transform-origin: bottom left;
    background: white;
  }

}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 20em;
  background-image: radial-gradient(circle at center bottom, $color2, $color1);
}

.hero__text {
  margin-bottom: 1em;
  font-weight: 100;
  color: white;
  text-align: center;
}

.sb {
  height: 3em;
}