.container
  .link 
    a href='https://www.pinterest.ca/pin/488218415826914497/' View original print here
  .pink-left-wrapper
    .pink-left
  .pink-right-wrapper
    .pink-right
  .red-left-wrapper
    .red-left
  .red-right-wrapper
    .red-right
  .blue-left-wrapper
    .blue-left
  .blue-right-wrapper
    .blue-right
  .black-top-wrapper
    .black-top
  .black-bottom-wrapper
    .black-bottom
  .content-wrapper
    .content-left
      div 4 PT CONCERT
      div SOLIDAR
      div DELASSOCIACIO
      div SANT TOMAS
    .content-right
      div Ds26
      div Gener del 2013
      div 18:30h
      div Pastemak
      div Taquilla €10 / anticipada 8€
      
  
  

  
  

  

* { margin: 0; padding: 0; text-decoration: none;}

$bg: #ededed;
$big-box: 130px;
$small-box: 95px;

.center {
  display: grid;
  align-items: center;
	justify-content: center;
}

.pseudo-rules {
  content: '';
  display: block;
}

body {
  @extend .center;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
}

.container {
  width: 536px;
  height: 756px;
  background: $bg;
  position: relative;
  z-index: 1;
  box-shadow: 3px 3px 20px lightgrey;
}

@mixin wrapper($top, $left, $opa, $deg) {
  transform: rotate($deg);
  position: relative; 
  top: $top;
  left: $left;
  opacity: $opa;
}

@mixin square($size, $square-color) {
  width: $size;
  height: $size;
  background-color: $square-color;
  position: absolute;   
}

@mixin square-child($size, $circle-color-1) {
  @extend .pseudo-rules;
  border-radius: 100%;
  background-color: $circle-color-1;
  width:  $size;
  height:  $size;
  bottom: 50%;
  position: absolute;
  z-index: -1;
}
@mixin square-before($circle-color-2) {
  background-color: $circle-color-2;
  left: -50%;
  top: 0px;
}

$dark-blue: #060649;
$light-blue: #1aacf3;
$red: #fc1850;

.blue-left-wrapper {
  @include wrapper(34.5%, 14.5%, 0.9, 45deg);
  .blue-left {
    @include square($big-box, $dark-blue);
  }
  .blue-left::before, .blue-left::after {
    @include square-child($big-box, $light-blue);
  }
  .blue-left::before {
    @include square-before($red);
  }
}

.blue-right-wrapper {
  @include wrapper(33%, -15%, 0.9, 225deg);
  .blue-right {
    @include square($big-box, $dark-blue);
  }
  .blue-right::before, .blue-right::after {
    @include square-child($big-box, $light-blue);
  }
  .blue-right::before {
    @include square-before($red);
  }
}

$red1: #F61852;
$red2: #FB2AB2;
$red3: #FD9496;

.red-left-wrapper {
  @include wrapper(33%, -56.1%, 0.9, 225deg);
  .red-left {
    @include square($big-box, $red1);
  }
  .red-left::before, .red-left::after {
    @include square-child($big-box, $red2);
  }
  .red-left::before {
    @include square-before($red3);
  }
}

.red-right-wrapper {
  @include wrapper(34.5%, 55.8%, 0.9, 45deg);
  .red-right {
    @include square($big-box, $red1);
  }
  .red-right::before, .red-right::after {
    @include square-child($big-box, $red2);
  }
  .red-right::before {
    @include square-before($red3);
  }
}

$black: #04050a;
$dark-red: #7f3d53;
$dark-blue: #164c54;

.black-top-wrapper {
  @include wrapper(14%, 89%, 0.87, 0deg);
  transform: translateX(-50%);
  .black-top {
    @include square($small-box, $black);
  }
  .black-top::before, .black-top::after {
    @include square-child($small-box, $dark-blue);
    bottom: 0;
    left: 43px;
  }
  .black-top::before {
    @include square-before($dark-red);
    left: 0;
    top: -43px;
  }
}

.black-bottom-wrapper {
  @include wrapper(41.1%, 92.5%, 0.8, 0deg);
  transform: translateX(-50%);
  .black-bottom {
    @include square($small-box, $black);
  }
  .black-bottom::before, .black-bottom::after {
    @include square-child($small-box, $dark-blue);
    bottom: 0;
    left: -43px;
  }
  .black-bottom::before {
    @include square-before($dark-red);
    left: 0;
    top: 43px;
  }
}

$pink: #BE6388;

.pink-left-wrapper {
  @include wrapper(26.5%, 21.5%, 0.9, 0deg);
  opacity: 1;
  .pink-left {
    @include square($small-box, $pink);
  }
  .pink-left::before, .pink-left::after {
    @include square-child($small-box, $pink);
    bottom: 0;
    left: -40px;
    opacity: 0.8;
  }
  .pink-left::before {
    @include square-before($pink);
    left: 0;
    top: 40px;
  }
}

.pink-right-wrapper {
  @include wrapper(28.5%, 60%, 0.9, 0deg);
  opacity: 1;
  .pink-right {
    @include square($small-box, $pink);
  }
  .pink-right::before, .pink-right::after {
    @include square-child($small-box, $pink);
    bottom: 0;
    left: 50%;
    opacity: 0.8;
  }
  .pink-right::before {
    @include square-before($pink);
    left: 0;
    top: -50%;
  }
}

$font-color1: #232323;
$font-color2: #202059;
$font-style: 'Montserrat', sans-serif;

.content-wrapper {
  display: grid;
  grid-template-columns: 46% auto;
  position: absolute;
  width: inherit;
  bottom: 0;
  padding: 11%;
}

.content-left {
  font: 700 23px/20px $font-style;
  color: $font-color1;
}

.content-right {
  font: 700 14px/13px $font-style;
  color: $font-color2;
}

.content-right div:last-child {
  font: 300 9px/45px $font-style;
}

.link {
  position: absolute;
  top: -11%;
  left: 50%;
  transform: translateX(-50%);
  font: 400 15px $font-style;
  border: 1px solid $font-color2;
  padding: 10px 20px;
}

.link a:visited {
  color: $font-color2;
}

.link:hover, .link a:hover {
  color: #ffffff !important;
  background: $font-color2;
}

// poster design by Quim Marin