.containerBasic {

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px 0px;
  grid-template-areas:
    "bannerBasic bannerBasic"
    "prods prods";
}
.bannerBasic {
   grid-area: bannerBasic; 
}
.prodsBasic {
  text-align: center;
  width: 90%;
  margin: 0 auto; 
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px 2px;
  grid-area: prods;
}
.prodb1:hover .xn_producto_hover{
	visibility: visible;
  	opacity: 1;
}
.prodb2:hover .xn_producto_hover{
	visibility: visible;
  	opacity: 1;
}
.prodb3:hover .xn_producto_hover{
	visibility: visible;
  	opacity: 1;
}
.prodb4:hover .xn_producto_hover{
	visibility: visible;
  	opacity: 1;
}
.prodb5:hover .xn_producto_hover{
	visibility: visible;
  	opacity: 1;
}

@media only screen and (max-width: 520px) { 
  .containerBasic { 
    text-align: center;
  }
  .prodsBasic {
    text-align: center;
    width: 100%;
    margin: 0 auto; 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-area: prods;
  }
  .xn_producto{
		background-color: white;
		position: relative;
		padding: 10px;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		width: 85%;
		height: 90%;
	}
}
.footbannerBasicerPro { 
  
  text-align: center;
  grid-area: footerPro; 
}

@media only screen and (max-width: 1920px) {
  .footbannerBasicerPro a img{
    width: 100%;
    max-width:1900px;
  }
  .containerBasic a img{
    width: 100%;
    max-width:1920px;
  }

}
@media only screen and (max-width: 800px) {
  .bannerBasic a img{
    width: 100%;
    max-width:800px;
  }
  .prodsBasic {
    text-align: center;
    width: 100%;
    margin: 0 auto; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-area: prods;
  }
  .xn_subcategorias_micrositios {
    display: grid;
    /* grid-template: auto / 1fr 1fr 1fr 1fr; */
    grid-gap: 30px;
    grid-template-columns: auto auto auto;
    width: 80%;
    margin-left: 10%;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 500px) {
  .bannerBasic a img{
    width: 100%;
    max-width:500px;
  }
  .prodsBasic {
    text-align: center;
    width: 100%;
    margin: 0 auto; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-area: prods;
  }
  .xn_subcategorias_micrositios {
    display: grid;
    /* grid-template: auto / 1fr 1fr 1fr 1fr; */
    grid-gap: 30px;
    grid-template-columns: auto auto auto;
    width: 80%;
    margin-left: 7%;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 375px) { 
  .containerBasic { 
    text-align: center;
  }
  .prodsBasic {
    text-align: center;
    width: 100%;
    margin: 0 auto; 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-area: prods;
  }
  .xn_producto{
		background-color: white;
		position: relative;
		padding: 10px;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		width: 85%;
		height: 90%;
	}
  .xn_subcategorias_micrositios {
    display: grid;
    /* grid-template: auto / 1fr 1fr 1fr 1fr; */
    grid-gap: 30px;
    grid-template-columns: auto auto;
    width: 80%;
    margin-left: 10%;
    padding-bottom: 20px;
}
}