@import url("../../inati/_palette-ySWM8g-.css");

[data-controller~="inati--jumbotron"] {
  margin-top: .5rem;
  height: 60vh;
  max-height: 500px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  &.left {
    .jumbotron-content {
      img.jumbotron-image {
        right: -5rem;
        @media (min-width: 768px) {
          right: 2rem;
        }

        @media (min-width: 1024px) {
          right: 8rem;
        }
      }

      .jumbotron-text {
        left: 0;

        @media (min-width: 576px) {
          left: 2rem;

          .jumbotron-title {
            margin-left: 2rem;
          }
        }

        @media (min-width: 1200px) {
          left: 12rem;
        }

        @media (min-width: 1400px) {
          left: 15rem;
        }
      }
    }
  }

  &.right {
    .jumbotron-content {
      img.jumbotron-image {
        left: -5rem;
        @media (min-width: 768px) {
          left: 2rem;
        }

        @media (min-width: 1024px) {
          left: 8rem;
        }
      }

      .jumbotron-text {
        right: 0;

        @media (min-width: 576px) {
          right: 2rem;

          .jumbotron-subtitle {
            margin-left: 2rem;
          }
        }

        @media (min-width: 1200px) {
            right: 3rem;
        }

        @media (min-width: 1400px) {
            right: 5rem;
        }
      }
    }
  }

  .background-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    &.background-image {
      object-fit: cover;
      opacity: 10%;
    }

    &.background-content-green {
      background-color: var(--inati-green);
      opacity: 50%;
    }

    &.background-content-orange {
      background-color: var(--inati-orange);
      opacity: 50%;
    }
  }

  .jumbotron-content {
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    img.jumbotron-image {
      object-fit: cover;
      position: absolute;
      width: 30rem;
      height: 20rem;
      border-radius: 4rem;
      box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 25%);
      z-index: -1;
      filter: contrast(50%);

      @media (min-width: 1024px) {
        width: unset;
        height: 80%;
      }

      &.blend {
        mix-blend-mode: luminosity;
      }

      &.lighter {
        filter:
          contrast(50%)
          brightness(150%);
      }
    }

    .jumbotron-text {
      position: absolute;
      margin-left: .5rem;
      margin-right: .5rem;
      max-width: 25rem;

      @media (min-width: 576px) {
        max-width: 44rem;
      }

      h1.jumbotron-title {
        margin: 0;
        text-transform: uppercase;
        font-weight: bolder;
        font-size: 3rem;
        line-height: 1;
        max-width: 32rem;

        @media (min-width: 576px) {
          font-size: 5rem;
        }
      }

      h2.jumbotron-subtitle {
        margin: 0;
        font-weight: bolder;
        font-size: 1.5rem;

        @media (min-width: 576px) {
          font-size: 2rem;
        }
      }
    }
  }

}