.popular-groups .popular-groups-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style-type: none;
  gap: 15px;
}
@media screen and (min-width: 1024px) {
  .popular-groups .popular-groups-list {
    gap: 30px;
  }
}
.popular-groups .popular-groups-list li {
  width: calc(50% - 7.5px);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 560px) {
  .popular-groups .popular-groups-list li {
    width: calc(25% - 11.25px);
  }
}
@media screen and (min-width: 1024px) {
  .popular-groups .popular-groups-list li {
    width: calc(25% - 22.5px);
  }
}
.popular-groups .popular-groups-list li * {
  transition: var(--transition-all-fast);
}
.popular-groups .popular-groups-list li .popular-groups-list-item {
  display: flex;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  aspect-ratio: 2/3;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.popular-groups .popular-groups-list li .popular-groups-list-item .popular-groups-list-item-content {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 15px;
  gap: 10px;
  text-wrap: balance;
}
@media screen and (min-width: 1024px) {
  .popular-groups .popular-groups-list li .popular-groups-list-item .popular-groups-list-item-content {
    padding: 30px;
  }
}
.popular-groups .popular-groups-list li .popular-groups-list-item .popular-groups-list-item-content .popular-groups-list-item-name {
  bottom: 20px;
  left: 20px;
  z-index: 5;
  color: var(--white-color);
  font-size: var(--heading-size-3);
  font-weight: bold;
}
.popular-groups .popular-groups-list li .popular-groups-list-item .popular-groups-list-item-content .popular-groups-list-item-preview-text {
  color: var(--white-color);
  right: 10px;
  bottom: 10px;
  z-index: 5;
  opacity: 0.8;
}
.popular-groups .popular-groups-list li .popular-groups-list-item:hover .popular-groups-list-item-content {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 100%);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}