.productos {
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
    width: auto;
    border: 0px;
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-areas: "filtro posts";
  }
  .post-list {
    grid-area: posts;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
    border: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    justify-content: left;
    align-content: flex-start;
    background: #E6D5B8;
    gap: 5px;
  }
  
  .post {
    display:grid;
    cursor: pointer;
    border: 1px solid #dbdbe2;
    border-radius: 8px;
    box-sizing: border-box;
    background:#FFF;
    text-decoration:none;
    color:#000;
    max-width: 270px;
    height:250px;
    grid-template-columns: minmax(190px,270px);
    grid-template-rows: 190px 22px 14px 24px;
    grid-template-areas: "post-image"
                         "post-name"
                         "post-medida"
                         "post-detalles";
    place-items:center;
    position: relative;
  }

  .post-image {
    grid-area: post-image;
    display:grid;
    margin:auto;
    overflow:hidden;
    max-width: 270px;
    heigth:190;
    max-height:190px;
  }
  .post-image img {
    width: 100%;
    height:100%;
    object-fit:contain;
    object-position: center;
  }
  .overlay-image {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 36px;
    z-index:1;
  }
  .post-name {
    grid-area: post-name;
    display:grid;
    font-family:Lato;
    font-size:15px;
    color:#777;
    width:180px;
    place-items: center;
  }
  .post-medida {
    grid-area:post-medida;
    display:grid;
    color:#00A;
    font-weight:700;
    font-family:Lato;
    font-size:14px;
    place-items: center;
  }
  .post-detalles{
    grid-area:post-detalles;
    display:grid;
    width:100%;
    height:24px;
    grid-template-rows: 24px;
    grid-template-columns: 5px  1fr  30px  1fr  5px;
    grid-template-areas: " .  post-precio  post-cod  post-marca  .";
    font-family:Lato;
    font-size:15px;
  }
  .post-precio {
    grid-area:post-precio;
    display:grid;
    width:100%;
    height:100%;
    grid-template-rows: 24px;
    grid-template-columns: 16px 1fr;
    grid-template-areas: " pp-moneda  pp-monto";
    place-items: end start;
  }
  .post-cod {
    grid-area:post-cod;
    display:grid;
    font-size:13px;
    color:#FDA;
    width:100%;
    height:100%;
    place-items: end center;
  }
  .post-marca {
    grid-area:post-marca;
    display:grid;
    color:#99F;
    height:24px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    width:100%;
    text-align:end;
  }
  .pp-moneda {
    grid-area:pp-moneda;
    color:#F99;
    font-size:13px;
    width:100%;
    height:24px;
    place-items: end start;
  }
  .pp-monto {
    grid-area:pp-monto;
    color:#900;
    width:100%;
    height:24px;
    place-items: end start;
  }

  .overlay-texto {
    position: absolute;
    top:177px;
    visibility:visible;
    z-index:1;
    width:100%;
    left: 50%;
    transform: translateX(-50%);
    text-align:center;
    font-family:Lato;
    font-size:13px;
    color:#CCC;
  }
  /*-------------------------------------------------------------------- PRODUCTO */
  .p_post {
    display: grid;
    max-width: 500px;
    height:252px;
    cursor: pointer;
    border: 1px solid #dbdbe2;
    border-radius: 9px;
    box-sizing: border-box;
    grid-template-rows: 190px 20px 20px 20px 2px;
    grid-template-columns: auto-fit;
    grid-template-areas:  "p_imagen"
                          "p_grupo"
                          "p_name"
                          "p_detalle"
                          ".";
    justify-content: center;
    align-content: center;
    text-decoration: none;
    font-family:Lato;
    font-size:14px;
    background: #fff;
  }
  .p_imagen {
    grid-area: p_imagen;
    width: 190px;
    height:190px;
    border: none;
    border-radius: 9px 9px 0px 0px;
  }
  .p_grupo {
    grid-area: p_grupo;
    display: grid;
    width:100%;
    height: 20px;
    color:#006;
    justify-content: center;
    align-content: center;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  .p_name {
    grid-area: p_name;
    width:100%;
    height: 20px;
    display: grid;
    grid-template-rows: 20px;
    grid-template-columns: 4px  1fr       4px;
    grid-template-areas:  ".    p_nombre  .";
    background: #FFF;
  }
  .p_nombre {
    grid-area: p_nombre;
    display: grid;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    padding-left: 3px;
    padding-right: 3px;
    width:100%;
    height: 20px;
    color:#111;
    align-content: start;
  }
  .p_detalle {
    grid-area: p_detalle;
    width:100%;
    height: 20px;
    display: grid;
    grid-template-rows: 16px;
    grid-template-columns: 70px      1fr;
    grid-template-areas:  "p_precio  p_marca";
  }
  .p_precio {
    grid-area: p_precio;
    display: grid;
    width:100%;
    height: 100%;
    grid-template-rows: 16px;
    grid-template-columns: 16px     3px 1fr;
    grid-template-areas:  "p_signo  .   p_valor";
    
  }
  .p_signo {
    grid-area: p_signo;
    display: grid;
    justify-content: right;
    align-content: center;
    color:#AAA;
    font-size:12px
  }
  .p_valor {
    grid-area: p_valor;
    font-size: 14px;
    justify-content: left;
    align-content: center;
    color: #333;
  }
  .p_marca {
    grid-area: p_marca;
    height: 16px;
    width: 100%;
    display: grid;
    grid-template-rows: 16px;
    grid-template-columns: 1fr     5px;
    grid-template-areas:  "p_mark  .";
    justify-content: right;
  }
  .p_mark {
    grid-area: p_mark;
    height: 16px;
    width: 100%;
    display: grid;
    justify-content: right;
    align-self: center;
    font-size: 13px;
    color:#066;
  }
 
  /*-------------------------------------------------------------------- DISPOSITIVOS */
  @media screen and (max-width: 320px) {
    .post {
      max-width: 350px;
    }
  }
    @media screen and (max-width: 1024px) {
    .productos {
      grid-template-columns: auto;
      grid-template-rows: auto auto;
      grid-template-areas: "filtro"
                           "posts";
    }
  }