.wp-block{} 
#archive-filters details {
  background: gainsboro;
  padding: 10px;
  padding-left: 30px;
  margin-bottom: 0.5rem;
}

#archive-filters details summary {
  cursor: pointer;
  transition: margin 125ms ease-out, background 10s ease;
  margin-left: -20px;
}

#archive-filters details[open] summary {
  margin-bottom: 10px;
  padding-bottom: 0.5em;
  border-bottom: solid 1px;
}

#archive-filters details[open] {
  background: darkgrey;
}

#yearSlider .noUi-tooltip {
  display: none;
}

#yearSlider .noUi-active .noUi-tooltip {
  display: block;
}

#yearSlider {
  height: 10px;
}

#yearSlider .noUi-connect {
  background: #c8102e;
}

#yearSlider .noUi-handle {
  height: 18px;
  width: 18px;
  top: -5px;
  right: -9px; /* half the width */
  border-radius: 9px;
}

#yearSlider .noUi-handle-lower {
  right: 0px;
}

#yearSlider .noUi-handle-upper {
  right: -18px;
}

#yearSlider {
  padding: 0 18px;
  margin-bottom: 4px;
}

#yearSlider .noUi-handle::before, #yearSlider .noUi-handle::after {
  width: 0;
  background: initial;
}

.authorHeader {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.author-image {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  object-fit: cover;
}

p.Price {
  margin: 0;
}

.coverImage {
  position: relative;
}
.coverImage .peakInside {
  transform-origin: top right;
  transition: all 1s ease-in;
  text-decoration: none;
  color: var(--wp--preset--color--base);
  position: absolute;
  top: 10%;
  right: calc(-1 * var(--f));
  padding-inline: 0.25em;
  padding-left: calc(0.25em + 0.1lh);
  line-height: 2.5;
  background: rgba(123, 175, 212, 0.897);
  border-bottom: var(--f) solid rgba(0, 0, 0, 0.3333333333);
  border-left: var(--r) solid rgba(0, 0, 0, 0);
  z-index: 1;
  /*https: ; //www.sitepoint.com/css-ribbons-single-element/, https: ; //css-generators.com/ribbon-shapes/ */
  --r: 0.8em; /* control the cutout of the ribbon */
  --f: calc(0.5em + 0.1lh); /* size of the folded part */
  --d: 0px; /* This will control the offset */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%, calc(100% - var(--f)) calc(100% - var(--f)), 0 calc(100% - var(--f)), calc(var(--r) + var(--d)) calc(50% - var(--f) / 2));
}
.coverImage .peakInside:hover {
  --d: 0.15lh;
  transform: rotate3d(0, 1, 0, 30deg) translate(-2px, 0);
}
