.list-media {
  max-width: 100px;
  max-height: 100px;
}

.jrb-events {
  display: flex;
  flex-wrap: wrap;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

.jrb-event {
  position: relative;
  flex-basis: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 100ms ease-in-out;
}

.jrb-event:not([data-type="last"]):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-event img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.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;
}

.jrb-event__share {
  display: none;
  position: absolute;
  inset: 0;
  width: fit-content;
  height: 100%;
  margin-block-start: 0.25rem;
  margin-inline-start: auto;
}

.jrb-event__share > span {
  cursor: default;
  padding: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
}

.jrb-event:hover .jrb-event__share > span {
  opacity: 1;
}

.jrb-event__socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  margin-block-start: 0.25rem;
  transform: translateX(100%) scale(0.75);
  transition: transform 200ms ease-in-out;
}

.jrb-event__share:hover .jrb-event__socials {
  transform: translateX(0);
}

.jrb-event__socials > * {
  display: grid;
  place-content: center;
  width: fit-content;
  aspect-ratio: 1 / 1;
  padding: 0.5rem;
  border-radius: 100vw;
  background-color: grey;
  color: #fff !important;
  text-decoration: none !important;
}

.jrb-event__facebook {
  background-color: #3b5998;
}

.jrb-event__twitter {
  background-color: #55acee;
}

.jrb-event__linkedin {
  background-color: #0077b5;
}

.jrb-event__pinterest {
  background-color: #bd081c;
}

.jrb-event[data-type="last"] {
  display: none;
}

@media screen and (min-width: 768px) {
  .jrb-event {
    flex-basis: 50%;
  }

  .jrb-event__share {
    display: block;
  }

  .jrb-event[data-type="last"] {
    display: initial;
    cursor: default;
  }
}