@media all {

  .ce-type-dw_teaser {
    --header-ratio: 3 / 4;
    --overlay-opacity: .625;
    --overlay-opacity-hover: .875;
    --transition: var(--transition-fast);
    --card-padding-vertical: var(--page-gap);
    --card-padding-horizontal: var(--page-grid-col-gap-width);
    position: relative;

    & .ce-inner ,
    & .ce-media {
      grid-row: 1;
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      justify-content: start;
    }

    & .ce-inner {
      z-index: 2;
      order: 0;
      grid-column: 2 / -2;
      transition: var(--transition);
      transition-property: background;

      & .ce-text {
        gap: unset;
        position: absolute;
        inset: 0;
        overflow: clip;

        & .ce-header {
          color: var(--color-white);
          padding-inline: var(--card-padding-horizontal);
          padding-block: var(--card-padding-horizontal) var(--element-padding);
          background-color: rgba(var(--color-gray-rgb) ,var(--overlay-opacity));
          position: relative;
          font-weight: 500;
          transition: var(--transition);
          transition-property: background, color;

          & > * {
            font-weight: 600;
            width: min-content;
            max-width: 100%;
            min-width: 80%;
          }

          &:not(:last-child)::after {
            display: none;
          }

        }

        & .ce-bodytext {
          color: var(--color-white);
          padding-inline: var(--card-padding-horizontal);
          position: relative;
          background-color: rgba(var(--color-gray-rgb) ,var(--overlay-opacity));
          transition: var(--transition);
          transition-property: background, color;
        }

        & .ce-header ,
        & .ce-bodytext {
          position: relative;

          &::after {
            content: "";
            position: absolute;
            inset-inline: 0;
            top: 100%;
            height: 5rem;
            background: linear-gradient(to bottom, rgba(var(--color-gray-rgb) ,var(--overlay-opacity)), rgba(var(--color-gray-rgb) ,0));
            transition: var(--transition);
            transition-property: opacity;
          }

        }

      }

    }

    & .ce-media {
      order: 1;
      grid-column: 2 / -2;

      & .ce-gallery {
        display: flex;
        flex-direction: column;
        gap: var(--element-gap);
      }

      & .ce-media-file {
        overflow: clip;

        & img {
          transition: var(--transition);
          transition-property: transform, filter;
        }

      }

    }

    & .ce-teaser-link {
      position: absolute;
      inset: 0;
      z-index: 3;

      &::before ,
      &::after {
        content: "";
        position: absolute;
        z-index: 4;
        top: 0;
        right: 0;
        transition: var(--transition);
        transition-property: transform, opacity;
        transform: scale(0);
        transform: translate(100% -100%);
        transform-origin: top right;
      }

      &::before {
        border: var(--size-4) solid transparent;
        border-top-color: var(--color-white);
        border-right-color: var(--color-white);
      }

      &::after {
        border: calc(var(--size-4) - .25em) solid transparent;
        border-top-color: var(--color-red);
        border-right-color: var(--color-red);
      }

    }

    &:has( > .ce-teaser-link) {

      &:focus-visible ,
      &:hover {

        & .ce-teaser-link {

          &::before ,
          &::after {
            transform: none;
          }

        }

      }

    }

  }

}

@media (min-width: 47.5rem) {

  .ce-type-dw_teaser {
    --card-padding-vertical: var(--element-padding);
    --card-padding-horizontal: var(--element-padding);
  }

}

@media (min-width: 62.5rem) {

  .ce-type-dw_teaser {
    --header-ratio: 1 / 2;
  }

}

@media (min-width: 90rem) {

  .ce-type-dw_teaser {

    & .ce-inner {

      & .ce-text {

        & .ce-header:not(:last-child)::after {
          display: block;
        }

        & .ce-bodytext {
          padding-bottom: var(--size-12);
          opacity: 0;
          background-color: transparent;
          transform: scale(.9);
          transition: var(--transition);
          transition-property: opacity, transform, color;

          &::after {
            display: none;
          }

          & i::before {
            font-size: .875em;
          }

        }

      }

    }

    &:has( > .ce-teaser-link, .ce-bodytext) {

      &:focus-visible ,
      &:hover {

        & .ce-inner {
          background-color: rgba(var(--color-gray-rgb) ,var(--overlay-opacity-hover));

          & .ce-text {

            & .ce-header {              
              color: var(--color-white);
              background-color: transparent;

              &::after {
                opacity: 0;
              }

            }

            & .ce-bodytext {
              background-color: transparent;
              color: var(--color-white);
              opacity: 1;
              transform: none;

              &::after {
                opacity: 0;
              }

            }

          }

        }

        & .ce-media {

          & .ce-media-file {

            & img {
              transform: scale(1.1);
              filter: blur(.25rem);
            }

          }

        }

        & .ce-teaser-link {

          &::before ,
          &::after {
            transform: none;
          }

        }

      }

    }

  }

}