.polaroid-wrapper.right {
  float: right; }

.polaroid-wrapper.left {
  float: left; }

.polaroid-wrapper .polaroid {
  width: 300px;
  height: 360px;
  background: var(--ui-polaroid-bg, #FAFAF9);
  box-shadow: var(--ui-polaroid-shadow, 2px -2px 20px 0px rgba(0, 0, 0, 0.1));
  border: 1px solid var(--ui-polaroid-border, #eee);
  -webkit-backface-visibility: hidden; }
  .polaroid-wrapper .polaroid > p {
    position: absolute;
    bottom: 5px;
    padding: 15px 20px;
    margin: 0;
    color: var(--ui-polaroid-caption-color, inherit); }
  .polaroid-wrapper .polaroid .gloss {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--ui-polaroid-gloss, linear-gradient(120deg, rgba(255, 255, 255, 0.6), transparent 70%, rgba(0, 0, 0, 0.1) 99%));
    box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    z-index: 10; }

.polaroid-wrapper .polaroid-img {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 280px;
  height: 280px;
  background: var(--ui-polaroid-img-bg, #eee);
  overflow: hidden; }
  .polaroid-wrapper .polaroid-img img {
    margin: 0 !important;
    display: inline-block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; }
  .polaroid-wrapper .polaroid-img p {
    margin: 0;
    padding: 0;
    height: 100%; }

:root.dark .polaroid-wrapper,
:root[data-theme="dark"] .polaroid-wrapper {
  --ui-polaroid-bg: #26272b;
  --ui-polaroid-border: #3a3b40;
  --ui-polaroid-shadow: 2px -2px 20px 0px rgba(0, 0, 0, 0.5);
  --ui-polaroid-caption-color: #e6e6e6;
  --ui-polaroid-gloss: linear-gradient(120deg, rgba(255, 255, 255, 0.15), transparent 70%, rgba(0, 0, 0, 0.2) 99%);
  --ui-polaroid-img-bg: #1f2023; }