.card * {
  max-width: 100%;
  height: auto;
}

.map-container {
  position: relative;
  overflow: hidden;
}


.map {
  position: absolute;
  opacity: 10%;
  width: calc(100% + 600px);
  left: -300px;
  top: 0;
}

@media (min-width: 786px) {
  .card-header::after, .card-header::before {
    position: absolute;
    top: 11px;
    right: 100%;
    left: -24px;
    border-right-color: transparent;
    border-style: solid solid outset;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    pointer-events: none;
    content: " ";
    border-color: transparent;
  }

  .card-header::before {
    border-right-color: #e0e0e0;
    border-width: 12px;
  }

  .card-header::after {
    margin-top: 1px;
    margin-left: 2.5px;
    border-right-color: #f8f8f8;
    border-width: 11px;
  }

  .map {
    width: calc(100% + 400px);
    left: -200px;
    top: -100px;
  }
}

.roller-item {
  max-height: 50vh;
  transition: all .15s ease;
  overflow: hidden;
}

.roller {
  position: relative;
  margin-bottom: 3rem !important;
}

.roller-button {
  position: absolute;
  top: 100%;
}

.avatar {
  width: calc(100% - 1rem);
}

@media (prefers-color-scheme: dark) {
  .bg-light {
    background-color: #343a40!important
  }

  .border-bottom {
    border-color: #495057!important
  }

  .card-header::before {
    border-right-color: #495057
  }

  .card-header::after {
    border-right-color: #343a40
  }
}