/* Baseline settings.  These will be reused as well. */
.bhe-grid-layout {}
.bhe-hide-section {display:none}
.bhe-grid-layout .bhe-grid-container{display: grid;}

@media (min-width: 320px) {
    .bhe-grid-layout .bhe-grid-container{display: block;}
}

@media (min-width: 768px) {
    .bhe-grid-layout .bhe-grid-container{display: grid;}
}


/* Each layout column definition. Granular selectors. */
.bhe-grid-layout .bhe-grid-container.grid-one-col{grid-template-columns: repeat(1, 1fr);}
.bhe-grid-layout .bhe-grid-container.grid-two-cols{grid-template-columns: repeat(10, 1fr);}
.bhe-grid-layout .bhe-grid-container.grid-three-cols{grid-template-columns: repeat(3, 1fr);}
.bhe-grid-layout .bhe-grid-container.grid-four-cols{grid-template-columns: repeat(4, 1fr);}

/* These are the grid gap settings.*/
.bhe-grid-layout .bhe-grid-container.column-gap-none {column-gap: 0px;}
.bhe-grid-layout .bhe-grid-container.column-gap-xsmall {column-gap: 10px;}
.bhe-grid-layout .bhe-grid-container.column-gap-small {column-gap: 20px;}
.bhe-grid-layout .bhe-grid-container.column-gap-medium {column-gap: 30px;}
.bhe-grid-layout .bhe-grid-container.column-gap-large {column-gap: 40px;}
.bhe-grid-layout .bhe-grid-container.column-gap-xlarge {column-gap: 60px;}

/* This is an override in the admin theme. */
.js-layout-builder-block.layout-builder-block{ padding:0px }

/* This is a view-mode for a block wanting the image to the left */
.bhe-grid-container.bhe-block-left-image.has-image {grid-template-columns: repeat(10, 1fr);column-gap: 20px;}
.bhe-grid-container.bhe-block-left-image.has-image .block-image{grid-column: 1 / span 3;}
.bhe-grid-container.bhe-block-left-image.has-image .block-image img {height: auto;}
.bhe-grid-container.bhe-block-left-image.has-image .block-meta{grid-column: span 7;}

/* This is a view-mode for a block wanting the image to the right */
.bhe-grid-container.bhe-block-right-image.has-image {grid-template-columns: repeat(10, 1fr);column-gap: 20px;}
.bhe-grid-container.bhe-block-right-image.has-image .block-image{grid-column: span 3;}
.bhe-grid-container.bhe-block-right-image.has-image .block-image img {height: auto;}
.bhe-grid-container.bhe-block-right-image.has-image .block-meta{grid-column: 1 / span 7;}

.bhe-grid-container.bhe-block-left-image .block-meta .block-title,
.bhe-grid-container.bhe-block-right-image .block-meta .block-title{
    font-family: "Gotham Narrow A", "Gotham Narrow B", "Roboto", "Helvetica";
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
}

/* This is a view-mode for a block wanting a normal card look */
.bhe-grid-container.bhe-block-card {display: block;}
.bhe-grid-container.bhe-block-card .block-image{}
.bhe-grid-container.bhe-block-card .block-image img {
    height: auto;
}
.bhe-grid-container.bhe-block-card .block-meta{grid-column: span 7;}
.bhe-grid-container.bhe-block-card .block-meta .block-title{
    font-family: "Gotham Narrow A", "Gotham Narrow B", "Roboto", "Helvetica";
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
}

/* The below styles are manual, but will be better leveraged in the future with a framework. */

.colspan-2 {grid-column: span 2;}
.colspan-3 {grid-column: span 3;}
.colspan-4 {grid-column: span 4;}
.colspan-5 {grid-column: span 5;}
.colspan-6 {grid-column: span 6;}
.colspan-7 {grid-column: span 7;}
.colspan-8 {grid-column: span 8;}

/* Custom Margin Bottom */
.bhe-grid-layout.mb-0 {margin-bottom: 0px}
.bhe-grid-layout.mb-2 {margin-bottom: 10px}
.bhe-grid-layout.mb-6 {margin-bottom: 20px}
.bhe-grid-layout.mb-10 {margin-bottom: 30px}
.bhe-grid-layout.mb-14 {margin-bottom: 40px}
.bhe-grid-layout.mb-18 {margin-bottom: 60px}
.bhe-grid-layout.mb-22 {margin-bottom: 80px}

/* Custom Margin Top */
.bhe-grid-layout.mt-0 {margin-top: 0px}
.bhe-grid-layout.mt-2 {margin-top: 10px}
.bhe-grid-layout.mt-6 {margin-top: 20px}
.bhe-grid-layout.mt-10 {margin-top: 30px}
.bhe-grid-layout.mt-14 {margin-top: 40px}
.bhe-grid-layout.mt-18 {margin-top: 60px}
.bhe-grid-layout.mt-22 {margin-top: 80px}

/* Custom Margin Start / Left */
.bhe-grid-layout.ms-0 {margin-left: 0px}
.bhe-grid-layout.ms-2 {margin-left: 10px}
.bhe-grid-layout.ms-6 {margin-left: 20px}
.bhe-grid-layout.ms-10 {margin-left: 30px}
.bhe-grid-layout.ms-14 {margin-left: 40px}
.bhe-grid-layout.ms-18 {margin-left: 60px}
.bhe-grid-layout.ms-22 {margin-left: 80px}

/* Custom Margin End / Right */
.bhe-grid-layout.me-0 {margin-right: 0px}
.bhe-grid-layout.me-2 {margin-right: 10px}
.bhe-grid-layout.me-6 {margin-right: 20px}
.bhe-grid-layout.me-10 {margin-right: 30px}
.bhe-grid-layout.me-14 {margin-right: 40px}
.bhe-grid-layout.me-18 {margin-right: 60px}
.bhe-grid-layout.me-22 {margin-right: 80px}

/* Custom Padding Bottom */
.bhe-grid-layout.pb-0 {padding-bottom: 0px}
.bhe-grid-layout.pb-2 {padding-bottom: 10px}
.bhe-grid-layout.pb-6 {padding-bottom: 20px}
.bhe-grid-layout.pb-10 {padding-bottom: 30px}
.bhe-grid-layout.pb-14 {padding-bottom: 40px}
.bhe-grid-layout.pb-18 {padding-bottom: 60px}
.bhe-grid-layout.pb-22 {padding-bottom: 80px}

/* Custom Padding Top */
.bhe-grid-layout.pb-0 {padding-top: 0px}
.bhe-grid-layout.pb-2 {padding-top: 10px}
.bhe-grid-layout.pb-6 {padding-top: 20px}
.bhe-grid-layout.pb-10 {padding-top: 30px}
.bhe-grid-layout.pb-14 {padding-top: 40px}
.bhe-grid-layout.pb-18 {padding-top: 60px}
.bhe-grid-layout.pb-22 {padding-top: 80px}

/* Custom Padding Start / Left */
.bhe-grid-layout.pb-0 {padding-left: 0px}
.bhe-grid-layout.pb-2 {padding-left: 10px}
.bhe-grid-layout.pb-6 {padding-left: 20px}
.bhe-grid-layout.pb-10 {padding-left: 30px}
.bhe-grid-layout.pb-14 {padding-left: 40px}
.bhe-grid-layout.pb-18 {padding-left: 60px}
.bhe-grid-layout.pb-22 {padding-left: 80px}

/* Custom Padding End / Right */
.bhe-grid-layout.pb-0 {padding-right: 0px}
.bhe-grid-layout.pb-2 {padding-right: 10px}
.bhe-grid-layout.pb-6 {padding-right: 20px}
.bhe-grid-layout.pb-10 {padding-right: 30px}
.bhe-grid-layout.pb-14 {padding-right: 40px}
.bhe-grid-layout.pb-18 {padding-right: 60px}
.bhe-grid-layout.pb-22 {padding-right: 80px}

.bhe-grid-layout h2 {
    margin-bottom: 20px;
}

.bhe-grid-layout .block-image {
    margin-bottom: 20px;
}

.bhe-grid-layout .block-cta-link {}
.bhe-grid-layout .bhe-block-card .block-cta-link div{
    text-align: center;
}
.bhe-grid-layout .block-cta-link div a{
    text-decoration: none;
    font-size: 16px;
    background-color: #fff;
    color: #444444;
    border: 1px solid #000;
    font-weight: 400;
    text-align: center;
    font-family: "Gotham Narrow A", "Gotham Narrow B", "Roboto", "Helvetica";
    font-style: normal;
    padding: 13px 16px;
    vertical-align: middle;
    margin: 20px auto;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 5px;
    display: inline-block;
}
.bhe-grid-layout .block-cta-link div a:hover {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16);
    opacity: 0.7;
}