.jrb-events-cat:not([data-type]) .jrb-cat-event {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.jrb-events-cat:not([data-type]) .jrb-cat-event:nth-child(2n) {
  flex-direction: row-reverse;
}

.jrb-events-cat:not([data-type]) .jrb-cat-event > div {
  flex-basis: 100%;
}

.jrb-events-cat:not([data-type]) .jrb-event-img {
  border-radius: 0.5rem;
  overflow: hidden;
}

.jrb-events-cat:not([data-type]) .jrb-event-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 992px) {
  .jrb-events-cat:not([data-type]) .jrb-cat-event {
    flex-direction: row;
  }

  .jrb-events-cat:not([data-type]) .jrb-cat-event:nth-child(2n) {
    flex-direction: row-reverse;
  }

  .jrb-events-cat:not([data-type]) .jrb-cat-event > div {
    flex-basis: calc(50% - 0.5rem);
  }
}

/*================
Grid Styles
=================*/

.jrb-events-cat[data-type="grid"] {
  display: flex;
  flex-wrap: wrap;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

.jrb-events-cat[data-type="grid"] .jrb-cat-event {
  position: relative;
  flex-basis: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 100ms ease-in-out;
}

.jrb-events-cat[data-type="grid"] .jrb-cat-event:hover {
  box-shadow: rgba(37, 38, 39, 0.03) 0px -1px 3px 0px,
    rgba(37, 38, 39, 0.03) 0px 1px 2px -5px,
    rgba(37, 38, 39, 0.05) 0px 2px 5px -5px,
    rgba(37, 38, 39, 0.06) 0px 4px 12px -5px,
    rgba(37, 38, 39, 0.08) 0px 12px 15px -5px;
  transform: scale(1);
}

.jrb-events-cat[data-type="grid"] .jrb-cat-event img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jrb-events-cat[data-type="grid"] .jrb-event__overlay {
  position: absolute;
  inset: 0;
  width: fit-content;
  height: fit-content;
  padding: 0.5rem;
  margin-block-start: auto;
  border-top-right-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .jrb-events-cat[data-type="grid"] .jrb-cat-event {
    flex-basis: 50%;
  }
}
