@import url("../lib/normalize/normalize.css");
@import url("config.css");

.navbar {
  background-color: var(--primary) !important;
}

.navbar-brand,
.nav-link {
  color: var(--white) !important;
}

.btn-primary {
  background-color: var(--primary);
  border: var(--primary);
}
.btn-primary:is(:hover) {
  background-color: var(--hover-primary) !important;
}

#inicio {
  background:
    linear-gradient(35deg, rgba(0,0,0, 0.2), rgba(0,0,0,0.75)),
    url("../images/inicio/fundo.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 35%;
  height: calc(100vh - 72px);
  color: #fff !important;
}

#projeto {
  background: var(--bg-primary);
  color: var(--white);
}

.projeto__text {
  text-align: justify;
}

.projeto__imgs {
  display: grid;
  gap: 16px;
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
}

.projeto__img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

@media screen and (min-width: 468px) {
  #projeto {
    align-items: center;
  }
  .projeto__text {
    max-width: 900px;
  }
  .projeto__imgs {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    max-width: 900px;
  }
}

.carousel__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cartaz__img {
  object-fit: cover;
}

@media screen and (min-width: 468px) {
  .carousel__img {
    width: 700px !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 auto;
  }
  .cartaz__img {
    width: 650px !important;
    margin: 0 auto !important;
  }
}

#criadores {
  background: var(--bg-primary);
  color: var(--white);
  align-items: center;
}


@media screen and (min-width: 468px) {
  .carousel__img {
    width: 700px !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 auto;
  }
}

footer {
  background: var(--secondary);
  color: var(--white);
}