html,
   body {
       margin: 0;
       padding: 0;
       height: 100%;
       width: 100%;
   }

   #map {
       height: 100%;
       width: 100%;
       z-index: 1;
   }


   .flickr-popup .leaflet-popup-content-wrapper {
       background: transparent;
       border-radius: 0;
       box-shadow: none;
       padding: 0;
   }

   .flickr-popup .leaflet-popup-content {
       margin: 0;
       padding: 0;
       width: auto !important;
       max-width: 90vw !important;
   }

   .flickr-popup .leaflet-popup-tip {
       display: none;
   }

   .popup-image-wrapper {
       position: relative;
       width: 800px;
       max-width: 90vw;
   }

   .popup-image-wrapper img {
       display: block;
       width: 100%;
       height: auto;
   }

   .popup-title-overlay {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: rgba(0, 0, 0, 0.75);
       color: white;
       padding: 6px 10px;
       font-size: 13px;
       font-weight: 600;
       box-sizing: border-box;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .popup-dice {
       cursor: pointer;
       margin-right: 6px;
       opacity: 0.7;
   }

   .popup-dice:hover {
       opacity: 1;
   }