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

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.card {
  &-inner {
    display: block;
    max-width: 350px;
    background: var(--theme-color-primary);
    border-radius: 16px;
    @media(max-width: 645px) {
      max-width: 230px;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .image-box {
    overflow: hidden;
    height: 233px;
    position: relative;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    @media(max-width: 645px) {
      height: 153px;
    }

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

    .copyright {
      @include copyright;
      margin-bottom: 8px;
    }
  }

  .text-box {
    position: relative;
    height: 197px;
    padding: 0 25px;
    color: var(--theme-color-white);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    background: var(--theme-color-gradient-01);
    background: linear-gradient(162deg, var(--theme-color-gradient-01) 50%, var(--theme-color-gradient-02) 98%, var(--theme-color-gradient-03) 100%);
    @media(max-width: 645px) {
      height: 130px;
    }

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: -34px;
      width: 100%;
      height: 34px;
      clip-path: path('M 0 15.88 C 112.843 -4.02 237.282 -3.95 350 15.88 L 350 234 L 0 234 Z');
      background: var(--theme-color-gradient-01);
    }

    .kicker {

    }

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

  &:hover {
    .card-inner {
      .image-box {
        img {
          scale: 1.1;
        }
      }
    }
  }
}