:root {
  --color-1: #6ea3c3;
  --color-2: #82b2c7;
  --color-3: #cfa577;
  --color-4: #9fb8b2;
  --color-5: #beb7a2;
  --color-6: #001b2e;
  --color-7: #294c60;
  --color-8: #05204a;
  --color-9: #1d263b;
  --color-10: #223843;
  --color-white: #ffffff;
  --color-black: #000000;
}

#descricao {
  padding: 3rem;
  height: 100vh;
  color: var(--color-10);
  background-image: linear-gradient(var(--color-1), var(--color-3));
}

#descricao-titulo {
  font-size: 2.5rem;
  margin: 0 auto 3rem;
  border-bottom: 4px solid var(--color-10);
  width: fit-content;
}

#descricao-conteudo-img {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

#descricao-conteudo {
  width: 33rem;
}

#logo-descrocao {
  font-size: 1.5rem;
  font-family: sans-serif;
  font-weight: bold;
  -webkit-text-stroke: 0.047rem var(--color-7);
  cursor: default;
  color: transparent;
  border-bottom: 0.078rem solid rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 0.25rem var(--color-white);
}

#descricao-conteudo p {
  text-align: justify;
  hyphens: auto;
  text-indent: 2rem;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--color-3-dark);
}

#descricao-conteudo p:nth-of-type(1) {
  margin-bottom: 2rem;
}

#descricao-img-div {
  width: 20rem;
  display: flex;
  justify-content: center;
}

#descricao-img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 2px solid var(--color-5);
  box-shadow: 0 0 4px var(--color-white);
}

@media (max-width: 580px) {
  #descricao {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #descricao-conteudo {
    width: 100%;
  }

  #descricao-conteudo p {
    font-size: 1.35rem;
  }

  #descricao-img-div {
    display: none;
  }
}