* {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    margin:0;
    padding: 0;
}

html {
    font-size: 62.5% !important;
    letter-spacing: 0.3px;
    display: grid;
    height: 100%;
}

body {
  background: url('https://casatequilacancun.com/assets/images/bkgr-menu.jpg') no-repeat top center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.casa-tequila-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* border-radius: 50%; */
  /* background-color: white; */
  width: 100%;
  /* max-width: 150px; */
  height: 100%;

}

.casa-tequila-brand img {
  width: 40%;
  max-width: 125px;
  /* position: absolute; */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 30px 20px;
    align-items:center;
    padding: 35px 20px;
    height: 100%;
  }

  .grid-item a {
    color: black;
    display: block;
    position: relative;
    text-decoration: none;
    transition: all 0.15s ease-in-out;


    height: 100%;
  }

  .grid-item:hover {
    background: url(https://img.freepik.com/free-photo/wooden-background_24972-623.jpg) no-repeat top center;
    background-color: rgba(0,0,0,0.7);
    background-size: cover;
    color: white !important;
    /* filter: grayscale(100%); */
    box-shadow: 0px 3px 31px -8px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0px 3px 31px -8px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 3px 31px -8px rgba(0,0,0,0.6);
   
  }

  .grid-item:hover, .grid-item:hover > a {
    color: white !important;
  }

  .grid-item:hover .svg-color {
     filter: brightness(100000) invert(1) !important;
  }

  .grid-item:hover .svg-color.google-comments {
    filter: brightness(100000) invert(0) !important;
 }
  
  .grid-item {  
    display: grid;
    text-align: center;
    align-content: center;
    height: 100%;
    padding: 20px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 8px;
    box-shadow: 0px 3px 11px -8px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0px 3px 11px -8px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 3px 11px -8px rgba(0,0,0,0.8);
    /* transition: all 0.15s ease-in-out; */
  }
  
  .grid-item img {
    width: 100%;
    max-width: 50px;
    height: auto;
  }
  
  .grid-item h2 {
    /* color: black; */
      font-weight: 400;
      font-size: 2.3rem;
      margin-top: 10px;
  }

  /* Colores iconos svg -- https://codepen.io/sosuke/pen/Pjoqqp */
  /* .svg-color.google-comments {
    filter: invert(22%) sepia(56%) saturate(3955%) hue-rotate(350deg) brightness(106%) contrast(99%);
  } */
  .svg-color.tripadvisor {
    filter: invert(60%) sepia(53%) saturate(5763%) hue-rotate(135deg) brightness(92%) contrast(106%);
  }
  .svg-color.youroppinion {
    filter: invert(69%) sepia(51%) saturate(770%) hue-rotate(331deg) brightness(112%) contrast(98%);
  }
  .svg-color.facebook {
    filter: invert(35%) sepia(69%) saturate(4656%) hue-rotate(207deg) brightness(99%) contrast(91%);
  }
  .svg-color.instagram {
    filter: invert(28%) sepia(68%) saturate(1926%) hue-rotate(298deg) brightness(86%) contrast(87%);
  }
  .svg-color.website {
    filter: invert(37%) sepia(5%) saturate(4865%) hue-rotate(164deg) brightness(93%) contrast(91%);
  }
  .svg-color.location {
    filter: invert(22%) sepia(56%) saturate(3955%) hue-rotate(350deg) brightness(106%) contrast(99%);
  }

/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
  /* Agrega tus estilos para dispositivos móviles aquí */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Estilos para tabletas */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* Agrega tus estilos para tabletas aquí */
}

/* Estilos para pantallas de escritorio */
@media only screen and (min-width: 1024px) {
  /* Agrega tus estilos para pantallas de escritorio aquí */
}