.nc-alp-frontend{
  --gap: 12px;
  --cols: 4;
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  width:100%;
  margin-bottom: 32px;
  padding-bottom: 8px;
}
.nc-alp-row{
  display:flex;
  flex-wrap:nowrap;
  gap: var(--gap);
}
.nc-alp-row.is-centered{
  justify-content:center;
}
.nc-alp-frontend-cell{
  border-radius:14px;
  overflow:hidden;
  background:#ffffff;
  padding:10px;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

.nc-alp-link, .nc-alp-no-link{
  display:block;
  width:100%;
  height:100%;
}
.nc-alp-img{
  max-width:100%;
  max-height:100%;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition: transform .2s ease;
}
.nc-alp-empty{width:100%;height:100%;background:transparent;}

@media (max-width: 640px){
  .nc-alp-frontend{
    grid-template-columns: 1fr !important;
  }
  .nc-alp-frontend-cell{
    aspect-ratio: unset;
  }
  .nc-alp-link, .nc-alp-no-link{
    height: auto;
  }
  .nc-alp-img{
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
}

.nc-alp-frontend-cell.is-empty{
  background: transparent !important;
  padding: 0 !important;
}
.nc-alp-frontend-cell.is-empty .nc-alp-empty{
  background: transparent !important;
}

@media (max-width: 640px){
  .nc-alp-frontend-cell.is-empty{
    display:none !important;
  }
}

@media (max-width: 640px){
  }


@media (max-width: 640px){
  .nc-alp-row{
    flex-direction:column;
  }
  .nc-alp-frontend-cell{
    flex-basis: 100%;
    max-width: 100%;
    aspect-ratio: unset;
  }
  .nc-alp-img{
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
}