/* REUSABLE CSS */

.section-container {
  max-width: 130rem;
  margin: 0 auto;

  /* padding: 0 2rem; */
}

.section-padding {
  padding: 0 2rem;
}

.bolded {
  color: var(--color-2);
  font-family: var(--font-1);
  font-weight: 900;
}

.separator {
  height: 8rem;
  max-width: 100%;
  background-image: url(../imgs/separator/separator2.svg);
}

/* Chimarrao separator */

.chimarrao-box {
  display: flex;
  justify-content: center;
  align-items: center;

  /* padding-bottom: 9.6rem; */

  position: relative;
}

.chimarrao-box:last-child {
  margin-bottom: 9.6rem;
}

.chimarrao-box::before,
.chimarrao-box::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 20%;
  top: 60%;
  margin: 0 auto;
}

/* green */
.chimarrao-box__green::before {
  right: 25%;
  background: var(--color-1);
}

.chimarrao-box__green::after {
  left: 25%;
  background: var(--color-1);
}

/* white */
.chimarrao-box__white::before {
  right: 25%;
  background: var(--color-3);
}

.chimarrao-box__white::after {
  left: 25%;
  background: var(--color-3);
}

.chimarrao-separator {
  display: block;
  width: 7rem;
  height: 7rem;
}

/* .chimarrao-green::after {
  content: "";
  position: absolute;
} */
.section-padding {
  padding: 0 1rem;
}
/* RESPONSIVE DESIGN */
@media screen and (max-width: 500px) {
  .chimarrao-box::before,
  .chimarrao-box::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 15%;
    top: 60%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 450px) {
  .chimarrao-separator {
    width: 5rem;
    height: 5rem;
  }
}