body>.likescontainer{
  --grid-margin:0px;
  width:100dvw;
  height:100dvh;
  position:absolute;
  top:0;
  left:0;
  padding:var(--grid-margin);
  background-color:#fff;
  z-index:900;
  overflow: hidden;
}
body>.likescontainer>.baseMenu{
  top:calc(var(--grid-margin));
  right:calc(var(--grid-margin) + var(--likes-scrollbar-width));
}
body>.likescontainer>.likes{
  --grid-gap:1px;
  height:calc(100dvh - 2*var(--grid-margin));
  overflow-y:auto;
}
body>.likescontainer>.likes>.item{
  position:relative;
  overflow: hidden;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color:#e9e9e9;
}



@media(hover: hover){
  body>.likescontainer>.likes>.item.realItem:hover{
    cursor: pointer;
    border:3px solid #fff;
  }
  body>.likescontainer>.likes>.item.realItem:active{
    border:8px solid #fff;
  }
}
@media(hover: none){
  body>.likescontainer>.likes>.item.realItem:active{
    border:5px solid #fff;
  }
}



body>.likescontainer>.likes>.item::before{
  position:absolute;
  top:100px;
  left:0;
  display: block;
  width: 300px;
  height: 300px;
  background-color:green;
  z-index:550px;
}
body>.likescontainer>.likes>.item .removeConfirm{
  background-image: url(../images/icons/remove_w_xs.png);
}
body>.likescontainer>.likes>.item .removeCancel{
  background-image: url(../images/icons/arrow_l_xs.png);
}
@media all and (orientation: landscape){
  body>.likescontainer>.likes{
    display: grid;
    grid-gap: var(--grid-gap);
    --temp-a: calc(2 * var(--grid-margin));
    --temp-b: calc(100dvh - var(--temp-a) - var(--grid-gap));
    --temp-c: calc(100dvw - var(--temp-a) - var(--grid-gap) - var(--scrollbar-width));
    --item-height: calc(var(--temp-b) / 2);
    --min-width: min(var(--item-height),calc(var(--temp-c) / 4));
    grid-template-columns: repeat(4, 1fr);
  }
  body>.likescontainer>.likes>.item{
    --max-width: calc(var(--temp-c) / 2); /*se imparte la 2 si nu la 4 ca sa se poata extinde mai mult, atunci cand sunt putine*/
    min-width: var(--min-width);
    max-width: var(--max-width);
    height: var(--item-height);
  }
}
@media all and (orientation: portrait){
  body>.likescontainer>.likes{
    display: grid;
    grid-gap: var(--grid-gap);
    --temp-a: calc(2 * var(--grid-margin));
    --temp-b: calc(100dvh - var(--temp-a) - var(--grid-gap));
    --temp-c: calc(100dvw - var(--temp-a) - var(--grid-gap) - var(--scrollbar-width));
    --item-width: calc(var(--temp-c) / 2);
    --item-height: max(150px,var(--item-width));
    --t-d: calc(2 * var(--grid-gap));
    --t-b: calc(100dvh - var(--temp-a) - var(--t-d));
    grid-template-columns: var(--item-width) var(--item-width);
    grid-auto-rows: calc(var(--t-b)/4);
  }
  body>.likescontainer>.likes>.item{
    max-height: calc(var(--t-b)/4);
    width: var(--item-width);
  }
}