.header-main {
  position: relative;

  width: 100%;
  min-height: 400px;
  .content-box {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 0 auto;
    height: 100%;
    max-width: 360px;
    max-height: 380px;
  }

  background: $color-3 url('../img/header-image.webp') center no-repeat;
  background-size: cover;

  &--min {
    height: 150px;
    background-color: $color-2;
    display: flex;
    justify-content: center;
    align-items: center;
    .content-box {
      figure {
        width: 150px;
      }
    }
  }

  .splide {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0;
    overflow: hidden;
    .splide__track {
      height: 100%;
      .splider-content {
        &::after {
          content: '';
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.2);
        }

        height: 100%;
        padding: 0;
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // .content-box {
  //   figure {
  //     width: 280px;
  //     figcaption {
  //       position: absolute;
  //       clip: rect(1px, 1px, 1px, 1px);
  //       clip-path: inset(0 0 99.9% 99.9%);
  //       overflow: hidden;
  //       height: 1px;
  //       width: 1px;

  //       padding: 0;
  //       border: 0;
  //     }
  //   }
  // }
}