.material-promotional{

  display: grid;

  justify-content: center;

  align-items: center;

  grid-template-columns: 50% 50%;

  height: 50rem;

  gap: 5rem;

  position: relative;

  margin-bottom: -10rem;

}



.material-promotional .left figure,

.material-promotional .left img{

  width: 100%;

  object-fit: cover;

  height: 50rem;

}



.material-promotional h1{

  font-family: var(--font-family-gin-regular);

  font-style: normal;

  font-weight: 400;

  font-size: 2.625rem;

  line-height: 2.925rem;

  color: var(--opa-marrom-claro);

  margin: 3rem 0 1rem;

}

  

.material-promotional p{

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

  line-height: 1.375rem;

  letter-spacing: -0.02em;

  color: var(--opa-cinza-escuro);

  margin-bottom: 2rem;

}



.material-promotional input[type="password"],

.material-promotional input[type="text"]{

  border: none;

  height: 4rem; 

  line-height: 4rem; 

  background-color: var(--opa-cinza);

  max-width: 28.75rem;

  width: 100%;

  display: inline-block;

  margin-bottom: 1rem;

  padding: 0 0 0 1rem;

  font-family: var(--font-family-gin-regular);

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

  color: var(--opa-cinza-escuro);

}



.material-promotional .checkbox{

  display: flex;

  align-items: center;

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

  line-height: 1.375rem;

  letter-spacing: -0.02em;

  color: var(--opa-cinza-escuro);

}



.material-promotional .checkbox a{

  font-weight: 700;

  text-decoration: underline;

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

  line-height: 1.375rem;

  letter-spacing: -0.02em;

  color: var(--opa-cinza-escuro);

  margin: 0 0.2rem;

}



.material-promotional input[type="checkbox"]{

  width: 1.625rem;

  height: 1.625rem;

  border-radius: 0;

  border: 1px solid var(--opa-marrom-claro);

  margin-right: 0.5rem;

}



.material-promotional button{

  border: none;

  height: 4rem; 

  background-color: var(--opa-marrom-claro);

  max-width: 17.188rem;

  width: 100%;

  display: inline-block;

  margin-bottom: 1rem;

  font-family: var(--font-family-gin-regular);

  font-style: normal;

  font-weight: 400;

  font-size: 1.5rem;

  color: var(--opa-bege);

  cursor: pointer;

  margin: 2rem 0;

  padding: 0 2rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition: var(--transition-animation);

}



.material-promotional button:hover,

.material-promotional button:focus,

.material-promotional button:active{

  background-color: var(--opa-vermelho);

}



.material-promotional button:hover img,

.material-promotional button:focus img,

.material-promotional button:active img{

  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(125deg) brightness(101%) contrast(105%);

}



@media only screen and (max-width: 991px) {

  .material-promotional{

    grid-template-columns: 100%;

    height: auto;

    margin-bottom: 10rem;

    gap: 2rem;

  }

  .material-promotional .left figure, 

  .material-promotional .left img{

    height: 20rem;

  }

  .material-promotional .right{

    margin: 0 1rem;

  }

}