/******************************************************************

Stylesheet: Block Style
Block: Card Grid

******************************************************************/
/******************************************************************

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
*********************/
/*********************
FONT SIZES
*********************/
/*********************
PADDINGS
*********************/
/*********************
MEDIA SIZES
*********************/
/*********************
WRAP SIZES
*********************/
.sp-card-grid-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  flex-wrap: wrap;
  gap: 20px; }
  .sp-card-grid-container.mob-1of2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-card-grid-container.mob-1of3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (min-width: 480px) {
    .sp-card-grid-container.mobtab-all {
      grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sp-card-grid-container.mobtab-1of2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-card-grid-container.mobtab-1of3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-card-grid-container.mobtab-1of4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 768px) {
    .sp-card-grid-container.tab-all {
      grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sp-card-grid-container.tab-1of2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-card-grid-container.tab-1of3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-card-grid-container.tab-1of4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1030px) {
    .sp-card-grid-container.desk-all {
      grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sp-card-grid-container.desk-1of2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-card-grid-container.desk-1of3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-card-grid-container.desk-1of4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-block-card {
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 10px 0 rgba(29, 29, 27, 0);
  transition: all 0.315s ease-in-out; }
  .sp-block-card .innleggstittel {
    font-size: 2.4rem;
    margin-bottom: 5px;
    line-height: 1.2; }
  .sp-block-card .innleggsbilde-link {
    display: block;
    position: relative;
    width: calc(100% + 40px);
    left: -20px;
    top: -20px; }
    .sp-block-card .innleggsbilde-link .innleggsbilde {
      padding-bottom: 60%;
      width: 100%;
      background-size: 100%;
      background-position: center;
      transition: all 0.5s ease-in-out; }
  .sp-block-card .byline {
    text-transform: uppercase;
    color: #75787b;
    margin-bottom: 10px; }
  .sp-block-card .innleggs-excerpt {
    font-size: 1.5rem;
    line-height: 1.4; }
  .sp-block-card .sp-les-mer {
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    position: relative; }
    .sp-block-card .sp-les-mer:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: #DAAA00; }
  .sp-block-card:focus, .sp-block-card:hover {
    box-shadow: 0 2px 10px 0 rgba(29, 29, 27, 0.1); }
    .sp-block-card:focus .innleggsbilde-link .innleggsbilde, .sp-block-card:hover .innleggsbilde-link .innleggsbilde {
      background-size: 105%; }

body.block-editor-page .byggemodul.card-grid * {
  box-sizing: border-box; }

body.block-editor-page .byggemodul.card-grid .sp-block-card .innleggstittel {
  margin: 0;
  font-size: 24px; }
  body.block-editor-page .byggemodul.card-grid .sp-block-card .innleggstittel a {
    color: #2D2A26;
    text-decoration: none; }

body.block-editor-page .byggemodul.card-grid .sp-block-card .byline {
  font-size: 13px; }

body.block-editor-page .byggemodul.card-grid .sp-block-card .innleggs-excerpt {
  font-size: 15px; }

body.block-editor-page .byggemodul.card-grid .sp-block-card .sp-les-mer {
  color: #2D2A26;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none; }