.main-container {
   background-color: var(--bg);
   width: 100%;
   height: auto;
   overflow: hidden;

   .parent {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(11, minmax(82px, 1fr));
      gap: 15px;

      a {
         padding: 20px;
         border-radius: 10px;
         text-decoration: none;
         font-size: 20px;
         font-weight: bold;
         color: var(--text-light);
         transition: 0.3s;
         position: relative;
         overflow: hidden;

         &:hover {
            transform: translateY(-5px);
         }
      }
   }

}

#videos {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../imgs/logos-bg/portal.webp') no-repeat center center/cover;
   font-size: 40px;
   grid-column: span 3 / span 3;
   grid-row: span 3 / span 3;
}

#hoteis {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../imgs/logos-bg/hoteis.webp') no-repeat center center/cover;
   grid-column: span 2 / span 2;
   grid-row: span 2 / span 2;
   grid-column-start: 4;
}

.insta {
   display: flex;
   justify-content: start;
   align-items: center;
   gap: clamp(8px, 1vw, 12px);
   min-width: 0;
   padding: clamp(12px, 1.4vw, 16px) !important;
   font-size: clamp(0.82rem, 1.45vw, 1rem) !important;
   line-height: 1.15;
   white-space: nowrap;

   img,
   i {
      flex: 0 0 clamp(34px, 3.8vw, 44px);
      width: clamp(34px, 3.8vw, 44px);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      text-align: center;
      filter: grayscale(100) brightness(100);
   }

   img{
      max-height: 36px;
      object-fit: contain;
   }
}

#mapa-turistico {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../imgs/logos-bg/mapa_turistico_bg.webp') no-repeat center center/cover;
   grid-column: span 2 / span 2;
   grid-row: span 2 / span 2;
   grid-column-start: 1;
   grid-row-start: 4;
}

#barraca-pescador {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../imgs/logos-bg/barraca_do_pescador.webp') no-repeat center center/cover;
   grid-column: span 2 / span 2;
   grid-row: span 2 / span 2;
   grid-column-start: 4;
   grid-row-start: 3;
}

#SEBRAE {
   background-color: var(--primary-color);
   grid-column-start: 6;
   grid-row-start: 4;
}

#MTUR {
   background: linear-gradient(45deg, #002776 0%, #004C99 25%, #0066CC 50%, #3399FF 75%, #66CCFF 100%);
   grid-column-start: 6;
   grid-row-start: 3;
}

#SEMTUR {
   background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
   grid-column-start: 6;
   grid-row-start: 1;
}

#PREFEITURA {
   background: #0d7fb8;
   grid-column-start: 6;
   grid-row-start: 2;
}

#EMBRATUR {
   background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
   grid-column-start: 6;
   grid-row-start: 5;
}

#SALGADO {
   background: linear-gradient(135deg, #0c5f35 0%, #168147 100%);
   grid-column-start: 6;
   grid-row-start: 6;
}

.salgado-mark {
   display: grid;
   place-items: center;
   flex: 0 0 clamp(34px, 3.8vw, 44px);
   width: clamp(34px, 3.8vw, 44px);
   height: clamp(34px, 3.8vw, 44px);
   border-radius: 50%;
   background: #fff;
   color: #0c5f35;
   font-size: clamp(0.76rem, 1.1vw, 0.92rem);
   font-weight: 900;
   letter-spacing: 0;
}

#igarapes {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../imgs/logos-bg/igarapes.webp') no-repeat center center/cover;
   grid-row: span 5 / span 5;
   grid-column-start: 3;
   grid-row-start: 4;
}

#tabua-de-mare {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../imgs/logos-bg/tabua_de_mare.webp') no-repeat center center/cover;
   grid-row: span 4 / span 4;
   grid-column-start: 4;
   grid-row-start: 5;
}
#cat {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../imgs/logos-bg/cat.webp') no-repeat center center/cover;
   grid-row: span 4 / span 4;
   grid-column-start: 5;
   grid-row-start: 5;
}

#praias {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../imgs/logos-bg/praias.webp') no-repeat center center/cover;
   grid-column: span 2 / span 2;
   grid-row: span 3 / span 3;
   grid-column-start: 1;
   grid-row-start: 6;
}

#contatos-uteis {
   background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), url('../imgs/logos-bg/abade-doca.webp') no-repeat center center/cover;
   grid-row: span 2 / span 2;
   grid-column-start: 6;
   grid-row-start: 7;
}

.soon-tile {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   gap: 12px;
   isolation: isolate;
}

.soon-tile::after {
   content: "Em breve";
   position: absolute;
   top: 14px;
   right: 14px;
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(255, 214, 0, 0.92);
   color: var(--dark-color);
   font-size: 0.72rem;
   font-weight: 900;
   text-transform: uppercase;
}

.soon-tile i {
   font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.soon-tile span {
   position: relative;
   z-index: 1;
}

#manguezais {
   background: linear-gradient(135deg, rgba(0, 67, 58, 0.86), rgba(0, 137, 96, 0.66)), url('../imgs/logos-bg/bosque.webp') no-repeat center center/cover;
   grid-column: span 2 / span 2;
   grid-row: span 2 / span 2;
   grid-column-start: 1;
   grid-row-start: 9;
}

#gastronomia {
   background: linear-gradient(135deg, rgba(118, 45, 0, 0.86), rgba(255, 141, 41, 0.64)), url('../imgs/logos-bg/barraca_do_pescador.webp') no-repeat center center/cover;
   grid-column: span 1 / span 1;
   grid-row: span 2 / span 2;
   grid-column-start: 3;
   grid-row-start: 9;
}

#cultura-popular {
   background: linear-gradient(135deg, rgba(58, 20, 120, 0.84), rgba(214, 61, 102, 0.64)), url('../imgs/logos-bg/abade-orla.webp') no-repeat center center/cover;
   grid-column: span 2 / span 2;
   grid-row: span 2 / span 2;
   grid-column-start: 4;
   grid-row-start: 9;
}

#trilhas {
   background: linear-gradient(135deg, rgba(17, 77, 31, 0.86), rgba(125, 171, 48, 0.62)), url('../imgs/logos-bg/igarapes.webp') no-repeat center center/cover;
   grid-column: span 1 / span 1;
   grid-row: span 2 / span 2;
   grid-column-start: 6;
   grid-row-start: 9;
}

@media (max-width: 768px) {
   .main-container {
      .parent {
         grid-template-columns: 1fr;
         grid-template-rows: auto;
         gap: 20px;
      }

      .parent>* {
         grid-column: auto !important;
         grid-row: auto !important;
      }

      .parent a {
         font-size: 18px !important;
         padding: 10px !important;
         grid-column: span 2 / span 2 !important;
         grid-row: span 6 / span 6 !important;
      }
   }
}


@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
   .main-container {
      .parent {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(6, 1fr);
         gap: 15px;
         padding: 20px;
      }

      .parent a {
         font-size: 14px !important;
         padding: 8px !important;
         min-height: 60px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
      }
   }
}