@use '../utilities';

// Composant Container
.container {
  padding: utilities.space(5) 10%;
}

.top-wave {
  position: relative;
  z-index: 2;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10;
    height: utilities.space(10);
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    bottom: calc(100% - 2rem);
    background-image: url('../images/svg/top-wave.svg');
    background-position: top center;
  }
}

.bottom-wave {
  position: relative;
  z-index: 2;

  &::after {
    z-index: 10;
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: utilities.space(10);
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    top: calc(100% - 2rem);
    background-image: url('../images/svg/bottom-wave.svg');
    background-position: bottom center;
  }
}

.bg-primary {
  background-color: utilities.$primary;
}

.bg-secondary {
  background-color: utilities.$secondary;
}

@media screen and (width >= 1280px) {
  .container {
    padding-block: utilities.space(10);
    padding-inline: max(10%, calc((100% - 144rem) / 2));
  }
}