.container100 {
  position: relative;
  width: 100%;
}

.image100 {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle100 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 15%;
  left: 10%;
  right: 10%;
  text-align: left;
}

.container100:hover .image100 {
  opacity: 0.3;
}

.container100:hover .middle100 {
  opacity: 1;
}

.text100 {
  color: DarkBlue;
  font-size: 10px;
  padding: 0px 0px;
}

.container11 {
  position: relative;
  width: 100%;
}

.image11 {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle11 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container11:hover .image11 {
  opacity: 0.3;
}

.container11:hover .middle11 {
  opacity: 1;
}

.text11 {
  color: DarkBlue;
  font-size: 10px;
  padding: 0px 0px;
}


.container12 {
  position: relative;
  width: 100%;
}

.image12 {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle12 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container12:hover .image12 {
  opacity: 0.3;
}

.container12:hover .middle12 {
  opacity: 1;
}

.text12 {
  color: DarkBlue;
  font-size: 10px;
  padding: 0px 0px;
}

.container13 {
  position: relative;
  width: 100%;
}

.image13 {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle13 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container13:hover .image13 {
  opacity: 0.3;
}

.container13:hover .middle13 {
  opacity: 1;
}

.text13 {
  color: DarkBlue;
  font-size: 10px;
  padding: 0px 0px;
}

.container14 {
  position: relative;
  width: 100%;
}

.image14 {
  opacity: 1;
  display: block;
  width: 30%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle14 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container14:hover .image14 {
  opacity: 0.3;
}

.container14:hover .middle14 {
  opacity: 1;
}

.text14 {
  color: DarkBlue;
  font-size: 8px;
  padding: 0px 0px;
}

.container15 {
  position: relative;
  width: 100%;
  height: auto;
}

.image15 {
  opacity: 1;
  display: block;
  width: 30%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle15 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 3%;
  left: 1%;
  right: 1%;
  text-align: left;
}

.container15:hover .image15 {
  opacity: 0.3;
}

.container15:hover .middle15 {
  opacity: 1;
}

.text15 {
  color: DarkBlue;
  font-size: 10px;
  padding: 0px 0px;
}

.container16 {
  position: relative;
  width: 100%;
}

.image16 {
  opacity: 1;
  display: block;
  width: 30%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle16 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container16:hover .image16 {
  opacity: 0.3;
}

.container16:hover .middle16 {
  opacity: 1;
}

.text16 {
  color: DarkBlue;
  font-size: 7px;
  padding: 0px 0px;
}

.container17 {
  position: relative;
  width: 100%;
}

.image17 {
  opacity: 1;
  display: block;
  width: 30%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle17 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container17:hover .image17 {
  opacity: 0.3;
}

.container17:hover .middle17 {
  opacity: 1;
}

.text17 {
  color: DarkBlue;
  font-size: 10px;
  padding: 0px 0px;
}

.container18 {
  position: relative;
  width: 100%;
}

.image18 {
  opacity: 1;
  display: block;
  width: 30%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle18 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container18:hover .image18 {
  opacity: 0.3;
}

.container18:hover .middle18 {
  opacity: 1;
}

.text18 {
  color: DarkBlue;
  font-size: 10px;
  padding: 0px 0px;
}

.container19 {
  position: relative;
  width: 100%;
}

.image19 {
  opacity: 1;
  display: block;
  width: 30%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle19 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container19:hover .image19 {
  opacity: 0.3;
}

.container19:hover .middle19 {
  opacity: 1;
}

.text19 {
  color: DarkBlue;
  font-size: 8px;
  padding: 0px 0px;
}

.container20 {
  position: relative;
  width: 100%;
}

.image20 {
  opacity: 1;
  display: block;
  width: 30%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle20 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  text-align: left;
}

.container20:hover .image20 {
  opacity: 0.3;
}

.container20:hover .middle20 {
  opacity: 1;
}

.text20 {
  color: DarkBlue;
  font-size: 7px;
  padding: 0px 0px;
}
/* =========================================================
   HERO height (ajusta se quiseres)
   ========================================================= */
:root{ --heroH: clamp(220px, 32vh, 420px); }


/* =======================
   CONTAINER 21
   ======================= */
.container21{
  position: relative;
  width: 100%;
  height: var(--heroH);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* fundo desfocado */
.container21::before{
  content:"";
  position: absolute;
  inset: -20px;
  background: url("/img/geral/fr_inicial.png") center/cover no-repeat;
  filter: blur(14px);
  transform: scale(1.1);
  opacity: 0.55;
  z-index: 0;
}

/* imagem principal (inteira, sem crop) */
.container21 .image21{
  position: relative;
  z-index: 1;

  width: 100% !important;   /* garante que não fica pequena */
  height: auto;

  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}

/* overlay */
.container21 .middle21{
  transition: .5s ease;
  opacity: 0;
  position: absolute;

  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);

  text-align: left;
  z-index: 2;
}

.container21:hover .image21{ opacity: 0.3; }
.container21:hover .middle21{ opacity: 1; }

.text21{
  color: DarkBlue;
  font-size: 7px;
  padding: 0px 0px;
}

/* =======================
   CONTAINER 22
   ======================= */
.container22{
  position: relative;
  width: 100%;
  height: var(--heroH);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

.container22::before{
  content:"";
  position: absolute;
  inset: -20px;
  background: url("/img/geral/qta_inicial.png") center/cover no-repeat;
  filter: blur(14px);
  transform: scale(1.1);
  opacity: 0.55;
  z-index: 0;
}

.container22 .image22{
  position: relative;
  z-index: 1;

  width: 100% !important;
  height: auto;

  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}

.container22 .middle22{
  transition: .5s ease;
  opacity: 0;
  position: absolute;

  top: 35%;
  left: 35%;
  transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);

  text-align: left;
  z-index: 2;
}

.container22:hover .image22{ opacity: 0.3; }
.container22:hover .middle22{ opacity: 1; }

.text22{
  color: DarkBlue;
  font-size: 7px;
  padding: 0px 0px;
}

/* =========================================================
   PATCH: Bootstrap grid dentro de TABLE
   Faz <tr class="row"> comportar-se como flex e <td class="col-md"> como colunas
   ========================================================= */

table.table tr.row {
  display: flex;               /* transforma a "row" em flex */
  flex-wrap: wrap;
  width: 100%;
  margin: 0;                   /* evita offsets de .row do bootstrap */
}

table.table tr.row > td.col-md {
  display: block;              /* deixa de ser tratado como table-cell */
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0.5rem;
  vertical-align: top;
}

/* 3 colunas a partir de md (>=768px) */
@media (min-width: 768px) {
  table.table tr.row > td.col-md {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

:root{
  --heroH: clamp(260px, 42vh, 520px);   /* fica para os outros blocos */
  --panoH: clamp(120px, 14vw, 200px);   /* NOVO: altura “boa” para panorâmicas */
}

/* 21/22: não uses heroH, usa panoH */
.container21,
.container22{
  height: var(--panoH);
  align-items: flex-start;  /* em vez de centrar, fica alinhado ao topo */
}

/* opcional: um pequeno respiro para não colar ao topo */
.container21 .image21,
.container22 .image22{
  margin-top: 6px;
}