/******************************************************************
Site Name:
Author:

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/******************************************************************
Site Name: 
Author: 

Stylesheet: Typography

******************************************************************/
/*
"Web design is 95% typography" - Oliver Reichenstein

When that quote was made in 2006 it was before web fonts, auto-play video,
and animated pop-ups so even if it is 65 or 75% today that is still *most* 
of any web site's design. Understanding some of the basics of typography
(and web typography) will go a long way.

There are lots of web typographic systems out there however many are
overly complex and not intuitive. Thus, we've tried to set some good
defaults that aren't based on confounding mixins here but you may want
to explore web typography further:

https://www.smashingmagazine.com/2009/08/typographic-design-survey-best-practices-from-the-best-blogs/
https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
http://www.newnet-soft.com/blog/csstypography
http://typecast.com/blog/4-simple-steps-to-vertical-rhythm
https://github.com/StudioThick/megatype
https://sassline.com
http://matejlatin.github.io/Gutenberg/
https://zellwk.com/blog/responsive-typography/
https://github.com/zellwk/typi

Note that most of the typography styles are set in base.scss with
the html, body, and h1-h6 tags so adjust as needed. Set a good baseline
and consider your vertical rhythm.

*/
/*********************
FONT FACE (IN YOUR FACE)
*********************/
/* To embed your own fonts, use this syntax
  and place your fonts inside the
  library/fonts folder. For more information
  on embedding fonts, go to:
  http://www.fontsquirrel.com/
  Be sure to remove the comment brackets.
  
  Also, you don't have to include a separate name for 
  each font style...just use the same name and
  declare each style separately. See here:
  http://www.newnet-soft.com/blog/csstypography
*/
/*  @font-face {
      font-family: 'Font Name';
      src: url('library/fonts/font-name.eot');
      src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/fonts/font-name.svg#font-name') format('svg');
      font-weight: normal;
      font-style: normal;
  }
*/
/*********************
FONT STACKS
*********************/
/*
 Commented out since WP uses system fonts now but if you can't let go I won't be upset. 
*/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
/* line 89, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/partials/_typography.scss */
p {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}

/* line 4, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid {
  margin-top: 2rem;
}

/* line 7, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid h2 {
  margin-top: 2.5rem;
}

/* line 11, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid #project-only-articles-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.5rem;
  padding-top: 2.5rem;
}

/* line 18, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid #project-only-articles-grid .project-article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* line 23, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid #project-only-articles-grid .project-article.residential {
  background-color: #6EA178;
}

/* line 27, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid #project-only-articles-grid .project-article.commercial {
  background-color: #23473E;
}

/* line 30, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid #project-only-articles-grid .project-article .project-summary {
  padding: 1em;
  color: #fff;
}

/* line 35, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid #project-only-articles-grid .project-article .project-summary .project-title {
  font-size: 24px;
  line-height: 28px;
}

/* line 39, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid #project-only-articles-grid .project-article .project-summary .project-location {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* line 47, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
.block-projects-only-grid .view-more {
  grid-column: span 1;
  padding: 1.5rem 0;
  display: flex;
  justify-content: center;
  align-content: center;
}

@media only screen and (min-width: 768px) {
  /* line 57, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
  .block-projects-only-grid {
    margin-top: 2.5rem;
  }
  /* line 59, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
  .block-projects-only-grid #project-only-articles-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 3rem;
    padding-top: 2.5rem;
  }
  /* line 64, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
  .block-projects-only-grid .view-more {
    grid-column: span 2;
  }
}

@media only screen and (min-width: 1030px) {
  /* line 71, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
  .block-projects-only-grid {
    margin-top: 7.5rem;
  }
  /* line 73, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
  .block-projects-only-grid #project-only-articles-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 6rem;
    padding-top: 2.5rem;
  }
  /* line 78, ../../../../MAMP/htdocs/greenheartuk.com/wp-content/themes/greenheart/library/scss/block-projects-only-grid.scss */
  .block-projects-only-grid .view-more {
    grid-column: span 4;
  }
}

/*# sourceMappingURL=block-projects-only-grid.css.map */