* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0A3265;
  overflow: hidden;
}

/* CONTAINER PRINCIPAL - RETÂNGULO (1:2) */
.quadrado {
  height: min(100vw, 100vh);
  width: min(100vh, 100vw);
  display: flex;
  flex-direction: column;
}

/* HEADER */
.header {
  background-color: #74b9ff;
  padding: 1dvh;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 1.5dvh;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CONTEÚDO - COLUNA DE CARDS */
.conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* CARD - QUADRADO (LIMITADO AO CONTAINER) */
.card {
  flex: 1;
  aspect-ratio: 1.77 / 1;
  max-height: calc((178% - 4dvh) / 3);
  max-width: 100%;
  
  background-color: #0A3265;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* IMAGEM DO CARD */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Preenche o quadrado sem distorcer */
  display: block;
}

/* BOTÃO DO CARD */
.card button {
  position: absolute;
  bottom: 1dvh;
  right: 1dvh;
  width: 4dvh;
  height: 4dvh;
  background-color: rgba(45, 52, 54, 0.8); /* Fundo semi-transparente */
  color: #ffffff;
  border: none;
  font-family: Arial, sans-serif;
  font-size: 2dvh;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.card button:hover {
  background-color: rgba(0, 0, 0, 1);
}

/* FOOTER */
.footer {
  background-color: #dfe6e9;
  padding: 1dvh;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 1.5dvh;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MODAL OVERLAY */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9); /* Fundo mais escuro para destacar foto */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* CONTEÚDO DO MODAL - RETÂNGULO (1:2) */
.modal-conteudo {
  width: min(35vw, 40vh);
  height: min(70vw, 80vh);
  aspect-ratio: 1 / 2;
  
  background-color: #ffffff; /* Fundo branco para a foto */
  padding: 2dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* IMAGEM DO MODAL */
.modal-conteudo img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Mostra a foto inteira sem cortar */
  display: block;
}

/* BOTÃO DO MODAL */
.modal-conteudo button {
  position: absolute;
  top: 2dvh;
  right: 2dvh;
  width: 6dvh;
  height: 6dvh;
  background-color: #2d3436;
  color: #ffffff;
  border: none;
  font-family: Arial, sans-serif;
  font-size: 2.5dvh;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 20;
}