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

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

.artwork-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;

  &::before {
    content: '';
    display: block;
    padding-top: 45%;

    @media(max-width: 999px) {
      padding-top: 52%;
    }
  }
}

section .artwork-wrapper {
  position: absolute;
  height: 100%;
  top: 0;
}

.artwork {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: calc(43vw - 160px);

  @media(max-width: 1199px) {
    width: 50vw;
    margin: 1% -18%;
    max-height: 90vw;
  }

  @media(max-width: 767px) {
    margin: 3% -24%;
    height: 94%;
  }

  @media(max-width: 567px) {
    margin: 5% -32%;
    height: 90%;
  }

  .foreground, .background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform-origin: right top;
    height: 75%;
    transform: rotate(-3deg);
    overflow: hidden;

    &:before {
      content: "";
      @include full-size;
      background-color: var(--swatches-primary-500);
      margin: -16% 0;
      border-top-left-radius: 26% 50%;
      border-bottom-left-radius: 26% 50%;
    }
  }

  .background {
    transform: rotate(-9deg);
    left: -3vw;
    margin-left: -60px;

    @media(max-width: 999px) {
      margin-left: -45px;
      margin-top: 5px;
    }
    @media(max-width: 567px) {
      margin-left: -30px;
      margin-top: 10px;
    }

    &:before {
      background: linear-gradient(323deg, rgba(75, 164, 144, 0.00) -5.42%, var(--gradient-a) 85.26%), var(--swatches-primary-500);
    }
  }

}
.artwork-left {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(50vw - (var(--container-width) / 2));
  + .artwork{
    width: calc(50vw - (var(--container-width) / 2));
    .foreground, .background {
      height: 437px;
      transform-origin: center center;
      transform: rotate(0) !important;
    }
  }

  @media(max-width: 767px) {
    margin: 3% -24%;
    height: 94%;
  }

  @media(max-width: 567px) {
    margin: 5% -32%;
    height: 90%;
  }

  .foreground, .background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform-origin: center center;
    height: 437px;
    transform: rotate(0);
    overflow: hidden;

    &:before {
      content: "";
      @include full-size;
      background-color: var(--swatches-primary-500);
      margin: -16% 0;
      border-top-right-radius: 26% 50%;
      border-bottom-right-radius: 26% 50%;
    }
  }

  .background {
    //transform: rotate(-11.38deg);
    transform: rotate(0);
    left: -482px;
    margin-right: -60px;

    @media(max-width: 999px) {
      margin-right: -45px;
      margin-top: 5px;
    }
    @media(max-width: 567px) {
      margin-right: -30px;
      margin-top: 10px;
    }

    &:before {
      background: linear-gradient(152deg, rgba(75, 164, 144, 0.00) -25.03%, var(--gradient-a) 96.63%), var(--swatches-primary-500);
    }
  }

}

[data-type="artwork-background-image"] {
  color: var(--color-background);
  .image-box {
    @include full-size;

    &:after {
      content: "";
      @include full-size;
      background: linear-gradient(120deg, rgba(var(--swatches-primary-500-rgb), 1) 0%, rgba(var(--swatches-primary-500-rgb), 0.2) 100%);
//      background: linear-gradient(152deg, rgba(75, 164, 144, 0.00) -25.03%, var(--gradient-a) 96.63%), var(--swatches-primary-500);
    }

    img {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .artwork {
    z-index: 1;
    margin-top: 20px;

    .foreground, .background {
      &:before {
        background: var(--color-background);
        opacity: 0.7;
      }
    }

    .background:before {
      opacity: 0.3;
    }
  }
}

[data-type="artwork-image"] {
  .image-box, .artwork-image-link {
    position: absolute;
    display: block;
    width: calc(43vw - 160px);
    right: 0;
    top: 0;
    transform-origin: right top;
    height: 75%;
    transform: rotate(-3deg);
    overflow: hidden;

    @media(max-width: 1199px) {
      width: 50vw;
      margin: 1% -18%;
      max-height: 90vw;
    }

    @media(max-width: 767px) {
      margin: 3% -24%;
      max-height: 94%;
    }

    @media(max-width: 567px) {
      margin: 5% -32%;
      max-height: 90%;
      height: 70vw;
    }

    picture {
      @include full-size;
      margin: -16% 0;
      border-top-left-radius: 26% 50%;
      border-bottom-left-radius: 26% 50%;
      overflow: hidden;
    }

    img {
      position: absolute;
      display: block;
      top: 10%;
      width: 100%;
      height: 80%;
      object-fit: cover;
      transform: rotate(3deg);
      max-width: none;
    }
  }

  .artwork .foreground {
    opacity: 0;
  }
  .artwork-image-link{
    opacity: 0;
  }

}