.ce-textpic {
  display: grid;

  grid-auto-rows: min-content 1fr;
  grid-auto-columns: 1fr;
  gap: $spacer;

  grid-template-areas:
    "title"
    "bodytext"
    "image";

  .ce-gallery {
    grid-area: image;
  }

  .ce-header {
    grid-area: title;
  }

  .ce-bodytext {
    grid-area: bodytext;
  }

  &.ce-above {
    grid-template-areas:
      "image"
      "title"
      "bodytext";
  }

  &.ce-center {
    .ce-gallery {
      justify-self: center;
    }
  }

  &.ce-left {
    .ce-gallery {
      @include media-breakpoint-up(sm) {
        justify-self: start;
      }
    }

    &.ce-intext {
      grid-template-areas:
        "title"
        "image"
        "bodytext";
      @include media-breakpoint-up(sm) {
        grid-template-areas:
        "title title"
        "image bodytext";
      }
      &.ce-nowrap {
        grid-template-areas:
        "image"
        "title"
        "bodytext";
        @include media-breakpoint-up(sm) {
          grid-template-areas:
        "image title"
        "image bodytext";
        }
      }
    }
  }

  &.ce-right {
    .ce-gallery {
      @include media-breakpoint-up(sm) {
        justify-self: end;
      }
    }

    &.ce-intext {
      grid-template-areas:
        "title"
        "image"
        "bodytext";
      @include media-breakpoint-up(sm) {
        grid-template-areas:
        "title title"
        "bodytext image";
      }

      &.ce-nowrap {
        grid-template-areas:
        "image"
        "title"
        "bodytext";
        @include media-breakpoint-up(sm) {
          grid-template-areas:
        "title image  "
        "bodytext image";
        }
      }
    }
  }


}


.frame-type-textmedia.frame-layout-3 {
  article.news-item {
    position: relative;
    padding-bottom: 74%;
    height: 0;

    .news-text {
      position: relative;
      z-index: 2;
      padding: 0;

      .header h3 {
        background-color: $primary;
        color: white;
        display: inline-block;
        line-height: 1;
        padding: 0.5em;
        margin-bottom: 0.2em;
        margin-right: -0.5em;
        margin-top: 12.5%;
        white-space: nowrap;
      }

      .teaser-text {
        .bodytext {
          font-size: 1rem;
          color: black;
          background-color: #fff;
          background-color: hsla(0, 0%, 100%, 0.9);
          padding: 0.5em;
          max-width: 80%;
          min-width: 60%;
          margin-top: 0.5em;
          margin-bottom: 0;

          p {
            margin: 0;
          }
        }

        .more {
          display: inline-block;
          margin-bottom: 0;
          font-weight: 400;
          text-align: center;
          white-space: nowrap;
          vertical-align: middle;
          touch-action: manipulation;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          transition: all 0.2s ease;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          background-color: #fff;
          padding: 5px 10px;
          font-size: 1rem;
          line-height: 1.5;
          border-radius: 1px;
          color: #fff;
          background-color: rgba(51, 51, 51, 0.9);
          opacity: 0;
          transform: translateX(-10px);
        }
      }
    }

    .news-image {
      position: absolute;
      z-index: -1;
      display: block;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 0.25s ease-out;

      figure.image {
        figcaption {
          display: none;
        }

        img {
          display: block;
          max-width: 100%;
          height: auto;
          width: 100%;
          opacity: 0.55;
          transition: opacity 0.25s ease-out;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          transform: translateX(0);
        }
      }
    }
  }

  article.news-item:hover {
    a {
      text-decoration: none;

      .news-text {
        .more {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .news-image {
        figure.image {
          img {
            opacity: 1;
          }
        }
      }
    }
  }
}
