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

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

.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(--theme-color-primary);
      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(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
    }
  }
  
}
.artwork-left {
  position: absolute;
  left: 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: -324px;
    right: 0;
    top: 0;
    transform-origin: left top;
    height: 100%;
    transform: rotate(-3.762deg);
    overflow: hidden;

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

  .background {
    transform: rotate(-11.38deg);
    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(-10deg, var(--theme-color-gradient-03) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-01) 90%);
    }
  }
  
}
[data-type="artwork-background-image"] {
  color: white;
  /*
  &:before {
    content: "";
    position: relative;
    display: block;
    height: 20px;
  }
  */
  .image-box {
    @include full-size;

    &:after {
      content: "";
      @include full-size;
      background: linear-gradient(120deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
    }

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

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

    .foreground, .background {
      &:before {
        background: var(--theme-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;
  }

}
/*
[data-browser="ie"] section[data-type="artwork-image"] .image-box img {
  width: auto;
  max-width: none;
  left: 50%;
  height: 84%;
  transform: rotate(3deg) translate(-50%, 0);
}
*/