@use "../globals" as *;
@use "sass:math";

.home-slider {
  position: absolute;
  left: 50%;
  font-size: fluid-text(200px, 300px);
  transform: translateX(-50%);
  // 海面分を考慮して要素を配置
  // Position elements considering the sea level
  bottom: calc(var(--float-level) + var(--ocean-level));
  width: 90%;

  &.main.bg {
    max-width: 4.2em;
    aspect-ratio: 1;

    @include mq(lg) {
      aspect-ratio: 3/2;
    }
  }

  &.main.left {
    display: block;
    width: 30%;
    max-width: 0.8em;
    top: 0;
    bottom: auto;
    transform: translateX(calc(-50% - 1.4em));
    aspect-ratio: 1;
  }
  &.main.right {
    max-width: 0.8em;
    width: 20%;
    display: block;
    transform: translateX(calc(-50% + 1.5em));
    aspect-ratio: 2/3;
  }
  &.title {
    transform: translateX(-55%);
    max-width: 1.2em;

    @include mq(lg) {
      transform: translateX(calc(-50% - 1em));
    }
  }
}
