Some Gutenberg block styles for the frontend using SASS and some internal mixins

style.css

/*
	breakpoint(intern) is a mixin to show this block only on screen sizez bigger than 768px
*/
.alignfull {
  @include breakpoint(intern){
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: auto;
    max-width: 1000%;

  }
}

.alignwide {
  @include breakpoint(intern){
    margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);
    width: auto;
    max-width: 1000%;

  }
}

.alignwide img,
.alignfull img {
  @include breakpoint(intern){
    display: block;
    margin: 0 auto;
    width: 100% !important;
  }
}

blockquote{
  background: transparent;
  margin: 0 0 1em;
  @include font-size(18);
  font-style: italic;
  padding: 0;
  text-align: center;

  cite {
    display: block;
    @include font-size(16);
    margin-top: 17px;
  }

  p:last-of-type {
    margin-bottom: 0;
  }

  &.is-large.wp-block-quote {
    @include font-size(22);
    margin: 0 0 1em;
    padding: 0;

    cite {
      text-align: center;
    }
  }

  &.wp-block-pullquote {
    border-top: 2px solid $basecolor;
    border-bottom: 2px solid $basecolor;
    padding: 1em 0;
  }
}