img.picture-src {
  width: 100%;
  height: auto;
  object-fit: cover;
}


.teaser {
  &.teaser-footer {
    position: relative;
    opacity: 0;
    transform: translateY(100px);
    transition: transform .25s ease-in, opacity .4s ease-in;

    &.show {
      opacity: 1;
      transform: translateY(0);
    }

    .wrapper {
      position: absolute;
    }
  }

  &.teaser-header-smaller {
    margin-bottom: var(--space_30-80);
  }
}

.card.card-4x3 {

  figure {
    margin: 0;
    z-index: 1;
  }

  .card-title {
    color: initial;
  }
}

/* ------------------------------ card fancy */
   .card.card-4x3 {
     --bs-card-border-width: 2px;
     --bs-card-inner-border-radius: 15px;
     word-wrap: break-word;
     background-clip: border-box;
     border: 2px solid #dcdcdc;
     border-radius: 16px;
     box-shadow: 0 25px 10px rgba(0, 0, 0, 0.01), 0 14px 8px rgba(0, 0, 0, 0.02), 0 6px 6px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.07);
     transition: all 0.4s ease-in-out;

     figure img {
       border-radius: 0 0 15px 15px;
     }

     .card-body {
       background-color: white;
       z-index: 2;
       border-top-left-radius: 15px;
       border-top-right-radius: 15px;
     }

     &:hover {
       box-shadow: 0 65px 26px rgba(0, 0, 0, 0.01), 0 37px 22px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.09), 0 4px 9px rgba(0, 0, 0, 0.1);
     }

     &::after {
       content: "";
       position: absolute;
       border-radius: 16px;
       inset: -2px;
       background: linear-gradient(161deg, var(--primary) 0%, #fff2e4 100%);
       z-index: 0;
       opacity: 0;
       transition: all 0.4s ease-in-out;
     }

     &:hover::after {
       opacity: 1;
     }

     .card-title {
       background-color: var(--bs-white);
     }
   }

/* ------------------------------ elements inherit a-link */
   .row.row-has-cols.subgrid,
   .row.collection-container.subgrid {

     &.subgrid-3-col {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));

       .ce-col {
         display: grid;
         grid-template-rows: subgrid;
         grid-row: span 3;
         width: 100vw;
       }
     }

     &:not(:has(.ce-col)),
     &:has(.ce-col) {
       .subgrid-body {
         margin-bottom: var(--bs-gutter-x);
       }
     }


     .subgrid-body {
       display: grid;
       grid-template-rows: subgrid;
       grid-row: span 3;

       a {
         display: grid;
         grid-template-rows: subgrid;
         grid-row: span 3;
         text-decoration: none;
       //position: relative;

         &:hover {
           .subgrid-title {
             color: var(--primary);
           }
         }
       }

       figure {
         overflow: hidden;
         margin: 0;
         border-top: none;
         border-radius: var(--ukm-border-radius-bottom);

         img {
           border-radius: 0;
           border-bottom: none;
         }
       }
     }

     .subgrid-title {
       display: flex;
       font-size: 30px;
       color: var(--primary);
       text-decoration: none;
       justify-content: center;
       align-items: center;
       padding: 18px;
       margin-bottom: 0;
       border: 1px solid rgba(0, 0, 0, 0.175);
       border-radius: var(--ukm-border-radius-top);
       border-bottom: none;
       transition: color 250ms ease-in-out;
     }
   }


a.card-link {

  img {
    transition: transform .4s ease;
  }

  &:hover {
    img {
      transform: scale(1.1);
    }
  }
}