/* Estilos para mobile (por defecto) */
#background-image {
  opacity: 0.4;
  position: absolute;
  left: 0;
  width: 100%;
  height: 400px;
  background-position: center top;
  background-size: cover;

  top: 1030px;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 75%);

  /* background-repeat: no-repeat; */
}

#slogan-container {
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  align-content: center;
  gap: 20px;
  width: 90%;
  height: auto;
  margin: 10px 0px 30px 0px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}

#slogan-image {
  opacity: 50%;
  align-self: center;
}

h4 {
  line-height: 25px;
}

/* Media query Tablet vertical */
@media (min-width: 576px) {
  #slogan-container {
    width: 90vw;
  }
}

/* Media query Tablet - Laptop */
@media (min-width: 768px) {
  #slogan-container {
    width: 80vw;
  }

  #background-image {
    top: 890px;
    height: 50%;
    clip-path: polygon(0 160px, 100% 160px, 100% 70%, 0 70%);
  }
}

/* Media query Desktop*/
@media (min-width: 992px) {
  #slogan-container {
    width: 60vw;
  }

  #background-image {
    height: 100%;
    top: 0;
    clip-path: polygon(0 140px, 100% 160px, 100% 100%, 0 100%);
  }
}

/* Media query */
@media (min-width: 1080px) {
  #slogan-container {
    width: 60vw;
  }

  #background-image{
    top: 0;
    height: 100%;
    clip-path: polygon(0 140px, 100% 140px, 100% 100%, 0 100%);
  }
}

/* Media query 2k */
@media (min-width: 1200px) {
  #slogan-container {
    width: 50vw;
  }

  #background-image {
    top: 0;
    height: 100%;
    clip-path: polygon(0 140px, 100% 140px, 100% 100%, 0 100%);
  }
}