// BIG GRID
.layout-valuta-grid {
  @extend .clearfix;
  // border-top: 1px solid $gray-light;
  padding-top: 10rem;
  .layout-title {
    position: relative;
    text-align: center;
    margin: 0 auto 3.5rem;
    z-index: 0;
    font-size: calc(1em + 1vw);
    letter-spacing: 2px;
    @media screen and($bp-larger-than-mobile) {
      font-size: calc(1.25em + 1.25vw);
    }
    @media screen and($bp-larger-than-tablet) {
      max-width: 75%;
      font-size: calc(1.5em + 1.5vw);
    }
    span {
      z-index: 1;
      background-color: $white;
      @media screen and($bp-larger-than-tablet) {
        padding-left: 3rem;
        padding-right: 3rem;
      }
    }
    &:after {
      content:'';
      @extend .centered;
      height: 1px;
      width: 100%;
      background-color: $primary-color;
      z-index: -1;
      display: none;
      @media screen and($bp-larger-than-mobile) {
        display: block;
      }
    }
  }
  .layout-content {
    max-width: 75%;
    margin: 0 auto 3.5rem;
  }
  .grid-valuta {
    padding: 10rem 0 15rem;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    @media screen and($bp-larger-than-phablet) {
      padding: 17.5rem 0 50rem;
    }
    .grid-el {
      position: relative;
      text-align: center;
      margin: 2.5rem 0;
      float: left;
      width: 100%;
      @media screen and($bp-larger-than-mobile) {
        width: 50%;
      }
      @media screen and($bp-larger-than-phablet) {
        margin: 0;
        width: auto;
      }
      h5 {
        font-family: $font-family-sans-serif;
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: .05rem;
        margin-bottom: .5rem;
        color: $black;
      }
      h6 {
        color: $gray-dark;
        font-family: $font-family-sans-serif;
        max-width: 50%;
        margin: 0 auto;
        font-weight: 400;
        font-size: 1em;
      }
      img {
        @media screen and(max-width: 768px) {
          max-width: 20rem;
          height: auto;
          width: 100%;
        }
      }
      @media screen and($bp-larger-than-phablet) {
        &.el-1 {
          width: 50%;
          .el--inner {
            transform: translate(15%, -25%);
          }
        }
        &.el-2 {
          width: 50%;
          .el--inner {
            transform: translate(0, 0);
          }
        }
        &.el-3 {
          width: calc(100% / 3);
          .el--inner {
            transform: translate(-20%, -10%);
          }
        }
        &.el-4 {
          width: calc(100% / 3);
          .el--inner {
            transform: translate(0, 25%);
          }
        }
        &.el-5 {
          width: calc(100% / 3);
          .el--inner {
            transform: translate(25%, 50%);
          }
        }
        &.el-6 {
          width: 50%;
          .el--inner {
            transform: translate(10%, 45%);
          }
        }
        &.el-7 {
          width: 50%;
          .el--inner {
            transform: translate(0%, 50%);
          }
        }
        &.el-8 {
          width: calc(100% / 3);
          .el--inner {
            transform: translate(-15%, 100%);
          }
        }
        &.el-9 {
          width: calc(100% / 3);
          .el--inner {
            transform: translate(15%, 125%);
          }
        }
        &.el-10 {
          width: calc(100% / 3);
          .el--inner {
            transform: translate(15%, 100%);
          }
        }
        &.el-11 {
          width: 50%;
          .el--inner {
            transform: translate(0%, 135%);
          }
        }
        &.el-12 {
          width: 50%;
          .el--inner {
            transform: translate(15%, 175%);
          }
        }
      }
    }
  }
}

// SMALL GRID
.layout-valuta-grid-small {
  position: relative;
  width: 100%;
  display: inline-block;
  border-top: 1px solid $gray-light;
  border-bottom: 1px solid $gray-light;
  @media screen and($bp-larger-than-phablet) {
    height: calc(60vh + 60vw);
  }
  @media screen and($bp-larger-than-tablet) {
    height: calc(50vh + 50vw);
  }
  @media screen and($bp-larger-than-desktop) {
    height: calc(42.5vh + 42.5vw);
  }
  @media screen and($bp-larger-than-desktophd) {
    height: 95rem;
  }
  .block-content {
    margin: 10rem 0;
    position: relative;
    @media screen and($bp-larger-than-phablet) {
      margin: 0;
      position: absolute;
      right: 5rem;
      bottom: 10rem;
      max-width: 40%;
    }
    &:before {
      content:'';
      position: absolute;
      bottom: 105%;
      left: 0rem;
      width: 50%;
      height: .85rem;
      background-color: $primary-color;
      @media screen and($bp-larger-than-phablet) {
        bottom: 115%;
      }
    }
    h1, h2, h3 {
      font-size: calc(1.25em + 1.25vw);
      letter-spacing: 2px;
    }
    h4, h5, h6 {
      font-size: 1.25em;
      font-weight: 400;
      font-family: $font-family-sans-serif;
    }
    a {
      @extend .custom-underline;
      @extend .lined-up;
      @extend .gold;
      color: $primary-color;
    }
  }
  .small-grid-el {
    text-align: center;
    .el--inner {
      text-align: center;
    }
    @media screen and($bp-larger-than-phablet) {
      position: absolute;
    }
    h5 {
      font-family: $font-family-sans-serif;
      font-size: calc(.65em + .65vw);
      font-weight: 400;
      letter-spacing: .05rem;
      margin-bottom: .5rem;
    }
    h6 {
      color: $primary-color;
      font-family: $font-family-sans-serif;
      max-width: 50%;
      margin: 0 auto;
      font-weight: 400;
      font-size: .9em;
    }
    img {
      max-width: 25rem;
      height: auto;
      width: 100%;
    }
    @media screen and($bp-larger-than-phablet) {
      &.el-1 {
        top: 5rem;
        right: 50%;
      }
      &.el-2 {
        top: 10rem;
        right: 5rem;
      }
      &.el-3 {
        bottom: 10rem;
        right: 50%;
      }
      &.el-4 {
        top: 50%;
        left: 2.5rem;
        transform: translateY(-50%);
      }
    }
    @media screen and($bp-larger-than-tablet) {
      &.el-2 {
        right: 15vw;
      }
      &.el-4 {
        left: 10rem;
      }
    }
  }
}
