.material-promotional-header{

  max-width: var(--container);

  margin: 0 auto;

  width: 100%;

  display: grid;

  grid-template-columns: 70% 30%;

  height: 6.25rem;

  line-height: 6.25rem;

}



.material-promotional-header .left{

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

  position: relative;

}



.material-promotional-header .left ul{

  padding: 0 10% 0 0;

  margin: 0;

  display: flex;

  align-items: center;

  gap: 1rem;

}



.material-promotional-header .left ul li{

  border-right: 1px solid rgb(81 81 81 / 20%);

  padding: 0 2rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.material-promotional-header .left ul li:first-child {

  padding: 0 2rem 0 0;

}



.material-promotional-header .left ul li:last-child {

  border-right: none

}



.material-promotional-header .left ul li a{

  color: var(--opa-branco);

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

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

}



.material-promotional-header .left ul li a:active,

.material-promotional-header .left ul li a:focus,

.material-promotional-header .left ul li a:hover{

  color: var(--opa-vermelho);

}



.material-promotional-header .left:after{

  content: '';

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

  width: 300rem;

  height: 6.25rem;

  position: absolute;

  top: 0;

  left: -300rem;

}



.material-promotional-header .right{

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

  position: relative;

}



.material-promotional-header .right ul{

  padding: 0;

  margin: 0;

  display: flex;

  align-items: center;

  gap: 1rem;

}



.material-promotional-header .right ul li {

  border-right: 1px solid rgb(81 81 81 / 20%);

  padding: 0 2rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}

.material-promotional-header .right ul li:first-child {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  display: block;

}

.material-promotional-header .right ul li:last-child {

  border-right: none

}



.material-promotional-header .right ul li a{

  color: var(--opa-branco);

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

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

}



.material-promotional-header .right ul li a:active,

.material-promotional-header .right ul li a:focus,

.material-promotional-header .right ul li a:hover{

  color: var(--opa-vermelho);

}



.material-promotional-header .right ul li a.close{

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

}



.material-promotional-header .right:after{

  content: '';

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

  width: 300rem;

  height: 6.25rem;

  position: absolute;

  top: 0;

  left: 0;

  z-index: -1;

}



.container-material-promotional{

  max-width: var(--container);

  margin: 3rem auto 5rem;

  width: 100%;

  display: grid;

  grid-template-columns: 70% 30%;

}



.container-material-promotional .left .materiais{

  width: 100%;

  display: grid;

  grid-template-columns: 50% 50%;

  gap: 0.2rem;

  margin-bottom: 45px;

}



.container-material-promotional .left .materiais .item img{

  max-width: 22.813rem;

  max-height: 17.5rem;

  object-fit: cover;

  margin-bottom: 1rem;

}



.container-material-promotional .left .materiais .item p{

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

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

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

  line-height: 1.375rem;

  max-width: 333px;

}



.container-material-promotional .left .materiais .item .formats{

  display: flex;

  gap: 1rem;

  justify-content: flex-start;

  align-items: center;

  margin: 0.5rem 0 1rem;

}



.container-material-promotional .left .materiais .item .format{

  display: flex;

  justify-content: center;

  align-items: center;

}



.container-material-promotional .left .materiais .item .format a{

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

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

  font-style: normal;

  font-weight: 700;

  font-size: 1.25rem;

  line-height: 1.375rem;

  letter-spacing: -0.01em;

  text-transform: uppercase;

  transition: var(--transition);

  cursor: pointer;

}



.container-material-promotional .left .materiais .item .format a:focus,

.container-material-promotional .left .materiais .item .format a:active,

.container-material-promotional .left .materiais .item .format a:hover{

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

}



.container-material-promotional .right .categories{

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

  padding: 3rem ;

}



.container-material-promotional .right .categories h3{

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

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

  font-style: normal;

  font-weight: 400;

  font-size: 1.1rem;

  line-height: 1.5rem;

  margin-bottom: 2rem;

}



.container-material-promotional .right .categories a{

  display: inline-block;

  width: 100%;

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

  font-style: normal;

  font-weight: 400;

  font-size: 1.1rem;

  line-height: 1.375rem;

  letter-spacing: -0.02em;

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

  margin-bottom: 1rem;

  transition: var(--transition);

}



.container-material-promotional .right .categories a:active,

.container-material-promotional .right .categories a:focus,

.container-material-promotional .right .categories a:hover{

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

}



.container-material-promotional .right .categories a img{

  margin-right: 1rem;

}



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

  .container-material-promotional,

  .material-promotional-header{

    grid-template-columns: 100%;

  }

  .container-material-promotional .left .materiais{

    grid-template-columns: 100%;

    margin: 0 0.7rem;

  }

  .material-promotional-header .left ul li:first-child{

    padding: 0;

  }

  .material-promotional-header .left ul{

    flex-direction: column;

    gap: 0;

    padding: 0;

  }

  .material-promotional-header .left ul li{

    border: none;

  }

}

.top-nav {

    display:none;

}

.material-link {

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

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

    font-style: normal;

    font-weight: 400;

    font-size: 1.1rem;

    line-height: 1.5rem;

}