ihk24/gfi-ihk-2024/stories/components/card/card.scss

@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.card {
  &-inner {
    position: relative;
    display: block;
    max-width: 350px;
    border-radius: 16px;
    overflow: hidden;
    container-type: inline-size;
    @media(max-width: 645px) {
      max-width: 230px;
    }

    &:hover {
      text-decoration: none;

      .image-box {
        img {
          scale: 1.06;
        }
      }
    }

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin-top: calc(40 / 70 * 100%);
      @include gradient;
    }
  }

  .image-box {
    overflow: hidden;
    position: relative;
    aspect-ratio: 70 / 47;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    clip-path: path("M 0 0 L 350 0 L 350 235 C 237.157 215.1 112.718 215.17 0 235 Z");

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      transition: all 0.25s ease;
    }

    .copyright {
      @include copyright;
    }
  }

  .text-box {
    position: relative;
    min-height: 194px;
    padding: 20px 25px;
    color: var(--color-button-primary-text);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;

    @media(max-width: 645px) {
      min-height: 130px;
    }

    .like-h4 {
      text-decoration: underline;
      margin: 0;
    }
  }

  &.extern,
  &.download,
  &.intranet,
  &.gallery,
  &.interaction,
  &.video {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-small-stern;
          font-family: 'Icons', sans-serif;
          position: relative;
          font-size: var(--icon-size-small);
          line-height: 1;
          text-decoration: none;
          display: inline-block;
          vertical-align: top;
          margin-left: 0.2em;
          @media(min-width: 983px) {
            margin-top: 0.1rem;
          }
          @media(min-width: 1340px) {
            margin-top: 0.27rem;
          }
        }
      }
    }
  }
  &.extern {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-small-link-external;
        }
      }
    }
  }
  &.download {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-small-download;
        }
      }
    }
  }
  &.intranet {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-small-schloss;
        }
      }
    }
  }
  &.gallery {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-galerie-small;
        }
      }
    }
  }
  &.interaction {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-interaction-small;
        }
      }
    }
  }
  &.video {
    .card-inner {
      .like-h4 {
        &:after {
          @include icon-video-small;
        }
      }
    }
  }
}