/* Exportação e configuração das fontes utilizadas */

@import url("https://fonts.googleapis.com/css2?family=Italiana&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Italiana&family=Lexend+Deca:wght@100..900&display=swap");
@import url("main.css");

/* CSS padrão */

.gallery {
  columns: 3;
  padding: 0 0 0 3.3%;
  margin-block: 25px;
  column-gap: 0;
}

.container {
  width: 83%;
  break-inside: avoid-column;
  height: auto;
  background-color: #f4ef88;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 0 0 25px 0;
  padding: 1rem;
  border-radius: 12px;
  transition: 0.7s;
}

.container-link {
  text-decoration: none;
  color: rgb(29, 29, 29);
  transition: 0.7s;
}

.container:hover {
  margin: 0 -0.6% 25px -1%;
  width: 85%;
  background-color: #ac9969;
}

.container-link:hover {
  color: whitesmoke;
}

.container-text {
  text-align: center;
  padding: 10px 20px;
}

.container-img {
  width: 100%;
  border-radius: 12px;
}

/* CSS responsivo (tablet) */
@media screen and (max-width: 1300px) {
  .title-text {
    font-size: 1.5em;
    width: 100%;
  }

  .title-sub,
  .title-sub-redirect {
    font-size: 0.8em;
  }

  .gallery {
    columns: 2;
    padding: 0 0 0 5.5%;
  }

  .container {
    width: 80%;
    margin: 0 0 20px 0;
  }

  .container:hover {
    margin: 0 0 17px 0;
    width: 81%;
    background-color: #ac9969;
    color: whitesmoke;
  }
}

/* CSS responsivo (celular) */
@media screen and (max-width: 768px) {
  .title-text {
    font-size: 1.5em;
    width: 100%;
  }

  .gallery {
    padding: 0;
    display: flex;
    align-items: center;
    flex-flow: column wrap;
  }

  .container {
    width: 80%;
    margin: 20px 0 20px 0;
  }

  .container:hover {
    margin: 20px 0 20px 0;
    width: 82%;
    background-color: #ac9969;
    color: whitesmoke;
  }
}