/*--------------------------------------------------------------
  16. Image Layer
----------------------------------------------------------------*/
.cs_image_layer.cs_style_1 {
  .cs_image_layer_1_wrap {
    padding-right: 24%;
    padding-bottom: 20%;
  }
  .cs_image_layer_2_wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 30%;
  }
  .cs_image_layer_1,
  .cs_image_layer_2 {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 30px;
      right: 30px;
      top: 30px;
      bottom: 30px;
      border: 1px solid #fff;
    }
  }
}
.cs_image_layer.cs_style_2 {
  .cs_image_layer_1_wrap {
    padding-left: 30%;
  }
  .cs_image_layer_2_wrap {
    position: absolute;
    left: 0;
    bottom: 50px;
    padding-right: 42%;
  }
  .cs_image_layer_2 {
    border: 10px solid #fff;
  }
}
.cs_image_layer.cs_style_3,
.cs_image_layer.cs_style_4 {
  &::before {
    content: '';
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    border: 1px solid #fff;
  }
  &.cs_type_1 {
    border-radius: 250px 0;
    img {
      border-radius: inherit;
    }
    &::before {
      border-radius: 225px 0;
    }
  }
}

.cs_image_layer.cs_style_4 {
  min-height: 600px;
  @media (max-width: 575px) {
    min-height: 400px;
  }
}
.cs_image_layer.cs_style_5 {
  .cs_image_layer_in {
    display: flex;
    .cs_image_layer_item {
      flex: 1;
      height: 636px;
      @media (max-width: 1400px) {
        height: 550px;
      }
      @media (max-width: 991px) {
        height: 400px;
      }
      @media (max-width: 575px) {
        height: 350px;
      }
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
      &:first-child {
        padding: 80px 11% 80px 0;
        @media (max-width: 1600px) {
          padding: 80px 8% 80px 0;
        }
        @media (max-width: 1400px) {
          padding: 50px 6% 50px 0;
        }
        @media (max-width: 991px) {
          padding: 30px 24px 30px 0;
        }
        @media (max-width: 991px) {
          padding: 30px 10px 30px 0;
        }
      }
      &:nth-child(2) {
        flex: 1.5;
        position: relative;
        z-index: 2;
      }
      &:nth-child(3) {
        padding: 80px 0 80px 11%;
        @media (max-width: 1600px) {
          padding: 80px 0 80px 8%;
        }
        @media (max-width: 1400px) {
          padding: 50px 0 50px 6%;
        }
        @media (max-width: 991px) {
          padding: 30px 0 30px 24px;
        }
        @media (max-width: 575px) {
          padding: 30px 0 30px 10px;
        }
      }
    }
  }
  .cs_moving_text_wrap.cs_style_1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
  }
}