@use "./shared.scss" as *;

.wide-image-banner {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;

  // 배경
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: all 900ms ease 0s;
    z-index: -1;
  }

  .widget-container {
    max-width: $content-max-width;
    width: 100%;
    height: 100%;
    display: flex;
    .text-widget {
      width: 370px;
      @include point-tablet {
        width: 100%;
        margin: 40px 20px;
        transition: width 420ms ease 0s;
      }
      @include text-widget;
    }
  }

  &:hover {
    .background-image {
      transform: scale(1.05);
    }
  }
}
