.clas-events-react-base .grid-view {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid
}

.clas-events-react-base .list-view {
  flex-direction: column;
  row-gap: 24px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex
}

.clas-events-react-base li {
  list-style: none
}

.clas-events-react-base .list-view li {
  width: 100%;
  max-width: 100%
}

.clas-events-react-base .list-view ul {
  flex-direction: column;
  row-gap: 24px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex
}

.clas-events-react-base .list-view .card-img-top {
  width: 235px;
  height: auto
}

.clas-events-react-base .list-view .card {
  height: 235px
}

@media (width<=992px) {
  .clas-events-react-base .list-view .card {
    height: 100%
  }
  
  .list-view .card-img-top {
    width: auto;
    height: auto
  }
  
  .clas-events-react-base .grid-view {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (width<=767px) {
  .list-view .card-horizontal {
    flex-direction: column !important
  }
  
  .list-view .card-img-top {
    width: auto !important;
    max-width: none !important;
    max-height: 160px !important
  }
  
  .clas-events-react-base .grid-view {
    flex-direction: column;
    display: flex
  }
}

/*$vite$:1*/