body{
  text-align: center;
  font-family: "Roboto", "HelveticaNeue", Arial, Verdana, "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
}

//GRIDWRAPPER------------------------------------------
	.gridwrapper{
		background-color:#fff5da;
		width:100%;
		display:block;
		margin:1em auto;
		max-width:71.875em;
		box-sizing:border-box;
		padding:1em;

		//adjusting padding, this will need to be cleared for grid
		@media only screen and (min-width: 30em) {
			padding:0.5em 0.5em 0 0.5em;
		}

	 	&:after{
	 		content: "";
	    	display: table;
	    	clear: both;
    }
	}//gridwrapper

//CARD--------------------------------------------------
	.card{
		//for browsers that don't flexbox or grid
		margin-bottom:1em;

		@media only screen and (min-width: 30em) {
			width:50%;
			float:left;
			display:inline-block;

			//adjusting padding, this will need to be cleared for grid
			box-sizing:border-box;
			padding:0.5em;
      
			//for browsers that don't flexbox or grid
			height: 440px;
			overflow:hidden;

			p{
				max-height: 67px;
				overflow:hidden;
			}
		}//mobile-landscape

		//@include breakpoint(mobile-large){
		@media only screen and (min-width: 56.25em) {
			width: 33.33%;
		}

		figure{
			margin:0;
			line-height: 0;
		}

		img{
			width: 100%;
			height:auto;
		}
	}//card

//CARD-BG: wraps around card contents, needed for older browsers if you want the image to appear full-width
	.card-bg{
		background-color:#FFF;
		height:100%;

		//for browsers that don't flexbox or grid
		position:relative;

	}//card-bg

//CALLTOACTION----------------------------------------------
	.calltoaction{
		display:inline-block;
		margin:auto auto 1.5em auto;

		//for browsers that don't flexbox or grid
		@media only screen and (min-width: 30em) {
    		position: absolute;
    		left: 50%;
    		bottom: 0;
    		transform: translateX(-50%);
		}//mobile-landscape
	}

//SUPPORTS FLEXBOX-----------------------------------------------
@supports( (display:flex) or (display: -webkit-flex) or (display: -webkit-flex) or (display: -moz-flex) or (display: -ms-flex) or (display: -o-flex) ){
        /*.card,*/ .card-bg{ //depending on if you need background color on the card or not
            display:flex;
            flex-direction:column;
            //flex:1 0 auto; //if you want any orphan cards fill out the width of the container
        }

        .calltoaction{
            margin:auto auto 1.5em auto;
        }

        @media only screen and (min-width: 30em) {
            .gridwrapper{
                display:flex;
                flex-direction:row;
                flex-wrap:wrap;
            }

            .calltoaction{ //resetting styles for browsers that don't support flexbox or grid
                position: static;
                left: initial;
                bottom:initial;
                transform: translateX(0);
            }

            .card{//resetting styles for browsers that don't support flexbox or grid
                height:auto;
                overflow:auto;
                margin-bottom: 0;

                p{
                    max-height: none;
                    overflow:auto;
                }
            }
        }//mobile-landscape
    }//supports

//SUPPORTS CSS GRID-----------------------------------------
    @supports(display:grid){
        .gridwrapper{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(17.5em, 1fr));
            grid-gap:1em;

            //adjusting padding, this will need to be cleared for grid
            @media only screen and (min-width: 30em) {
                padding:1em;
            }
        }

        .card{
            width:auto;
            
            //resetting styles for browsers that don't support grid
            @media only screen and (min-width: 30em) {
			        padding:0;
			        margin-bottom:0;
            }
        }
    }//supports




//----------------------------------------------------------
//COSMETIC
	.calltoaction{
		background: #ff885e; /* Old browsers */
		background: -moz-linear-gradient(left, #ff885e 0%, #f33145 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #ff885e 0%,#f33145 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #ff885e 0%,#f33145 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff885e', endColorstr='#f33145',GradientType=1 ); /* IE6-9 */
		color:#FFF;
		text-decoration:none;
		padding:0.5625em 1.125em 0.625em;
    border-radius:1.25em;

		&:hover, &:focus, &:active{
			cursor:pointer;
			&:after{
				opacity:1;
			}
		}

		&:after{
			content:'read more';
			position:absolute;
			width:100%;
			height: 100%;
			background: #f33145; /* Old browsers */
			background: -moz-linear-gradient(left, #f33145 0%, #ff5ea9 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(left, #f33145 0%,#ff5ea9 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right, #f33145 0%,#ff5ea9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f33145', endColorstr='#ff5ea9',GradientType=1 ); /* IE6-9 */
			opacity:0;
			border-radius:1.25em;
			top: 0;
			left: 0;
			color:#FFF;
			text-align: center;
    		line-height:2.1875;
			transition:opacity 1s;
		}
	}

h1{
    font-family: 'Libre Baskerville', serif;
    text-align:center;
    background-image:linear-gradient(to right, #ff885d 0%,#ff5062 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);  
    color:#2f2f2f;
    line-height: 1.25;
    display:inline-block;
    font-size:32px;
    font-size:2rem;    
    margin:2em auto 0.5em;
}

h2, h3{
    margin:0.5em 0;
    text-align:center;
}

h2{
    font-family: 'Libre Baskerville', serif;
    font-style:italic;
    font-weight: normal;
    font-size:18px;
    font-size: 1.125rem;
    color:#b37b69;
    color:#5f5f5f;
    margin:0.5em auto 1.3333em auto;
}

h3{
    font-family: 'Libre Baskerville', serif;
    font-weight: normal;
    font-style: italic;
    font-size: 23px;
    font-size: 1.4375rem;
    margin: 1.04348em 0em  0.78261em 0em;
    color:#2f2f2f;
}

p{
    line-height:1.4;
    margin:0 1em 1.75em 1em;
    color:#5f5f5f;
}