#main {
    max-width: 100%;
    padding: 0;
}

.top-grid, #testimonials {
    max-width: var(--maxwidth);
    margin: auto auto;
    padding: 0 20px;
}

/* One row of squares, scrolled sideways: every plugin in a line rather than
   a block of them, however narrow the window. */
#plugin-grid {
    position: relative;
    /* the row breaks out of the text column and runs the full width of the
       window, up to the width the rest of the page keeps to; #outer hides
       what spills, so no page-wide scrollbar */
    width: min(100vw, var(--maxwidth));
    max-width: min(100vw, var(--maxwidth));
    margin: 40px calc(50% - min(50vw, var(--maxwidth) / 2)) 40px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-left: 20px;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 160px;
    gap: 0px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* room under the squares for the scrollbar to sit in */
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
    /* the row fades out at its right edge while there is more to come, so it
       reads as a strip that carries on rather than one that simply stops.
       index.js takes the fade off once the end is reached. */
    --fade: 70px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent);
}

#plugin-grid.at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

#plugin-grid::-webkit-scrollbar {
    height: 8px;
}

#plugin-grid::-webkit-scrollbar-track {
    background: transparent;
}

#plugin-grid::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: #d4d4d8;
}

#plugin-grid .plugin-square {
    scroll-snap-align: start;
}

/* A row that runs off both edges of the window and is scrolled sideways, as
   the squares are, and stops where they stop. */
.home-strip {
  display: flex;
  gap: 10px;
  width: min(100vw, var(--maxwidth));
  max-width: min(100vw, var(--maxwidth));
  margin-left: calc(50% - min(50vw, var(--maxwidth) / 2));
  margin-right: calc(50% - min(50vw, var(--maxwidth) / 2));
  padding: 2px 20px 10px;
  box-sizing: border-box;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-left: 20px;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 transparent;
  list-style: none;
}

.home-strip::-webkit-scrollbar {
  height: 8px;
}

.home-strip::-webkit-scrollbar-track {
  background: transparent;
}

.home-strip::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: #d4d4d8;
}

/* fading out at the right edge while there is more to come, as the row of
   squares does; index.js takes the fade off at the end of the row, and a row
   short enough to fit never wears it at all */
.home-strip {
  --fade: 70px;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent);
}

.home-strip.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

#content .home-categories {
  /* centred while they fit; "safe" so a row too long to fit starts at its
     beginning rather than being cut off on the left */
  justify-content: safe center;
  margin-top: -18px;
  margin-bottom: 26px;
}

#content .home-categories .directory-category {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* One collection, featured: the layered stage its own page opens with, and
   its name under it. The whole band is the link. */
/* the whole band shares one ground: the plugins' colours, ruled over in fine
   squares like the desk further down the page */
.home-featured {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin: 8px calc(50% - 50vw) 18px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  color: royalblue;

  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(135deg, var(--tint-from), var(--tint-to));
}

/* The fan is laid out in percentages of this box, so it only stays composed
   while the box can grow: past the width where the first plugin hits its own
   2x cap the images stop growing and the fan pulls apart. curated.py works
   that width out per collection and hands it over as --stage-px; the band
   behind still runs the whole way across. */
.home-featured-stage {
  position: relative;
  display: block;
  aspect-ratio: 100 / 42;
  max-width: var(--stage-px, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.home-featured-stage .collection-shot {
  position: absolute;
  display: block;
  height: auto;
  transform: rotate(var(--turn, 0deg));
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.16));
}

.home-featured-words {
  display: block;
  padding: 6px 20px 0;
  text-align: center;
  margin-top: -20px;
}

/* named with #content, which is where the underline on every link in the
   page comes from */
#content .home-featured,
#content .home-featured:hover {
  text-decoration: none;
}

/* the same colour the name is written in, let down towards the wash it sits
   on: quieter than the name without going grey on it */
.home-featured-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #999;
  color: color-mix(in srgb, var(--ink-from, #999) 58%, white);
  font-size: 12px;
  font-variation-settings: "wght" 700, "ital" 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* the name written in the colours it sits on, darkened: the first plugin's
   into the last's, as the tint behind it runs */
.home-featured-name {
  display: block;
  color: var(--ink-from, #222);
  font-size: 1.7em;
  font-variation-settings: "wght" 780, "opsz" 24;
  background-image: linear-gradient(110deg, var(--ink-from, #222), var(--ink-to, #222));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* under the band, the way to the rest of them */
#content .home-featured-more {
  margin: 0 0 46px;
  text-align: center;
  font-size: 15px;
}

#content .home-featured-more a {
  color: royalblue;
  font-variation-settings: "wght" 600, "ital" 0;
  text-decoration: none;
}

#content .home-featured-more a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-featured-arrow {
  display: inline-block;
  transition: transform 0.15s ease-out;
}

/* The name's colour comes from a gradient clipped to its own text, which only
   reaches the glyphs the element paints itself. The arrow is moved on hover,
   and a transform puts it on its own layer — out of that painting, and so
   invisible, since the fill it inherits is transparent. It carries the colour
   the gradient ends on instead, which is where it sits anyway. */
.home-featured-name .home-featured-arrow {
  color: var(--ink-to, #222);
  -webkit-text-fill-color: var(--ink-to, #222);
}

.home-featured:hover .home-featured-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .home-featured-arrow {
    transition: none;
  }

  .home-featured:hover .home-featured-arrow {
    transform: none;
  }
}

/* the ways in, under the row of squares: buttons rather than a line of links,
   with the font's own arrow on each */
#content .grid-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: -14px 0 36px;
}

#content .grid-links a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 100px;
    background: white;
    color: royalblue;
    font-size: 15px;
    font-variation-settings: "wght" 600, "ital" 0;
    text-decoration: none;
    transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}

#content .grid-links a:hover {
    border-color: royalblue;
    background: rgba(65, 105, 225, 0.07);
}

/* the free ones wear the site's green, as they do on /plugins */
#content .grid-links a.is-free {
    border-color: #b9dfc6;
    background: #eaf6ee;
    color: seagreen;
}

#content .grid-links a.is-free:hover {
    border-color: seagreen;
    color: #1e6b41;
}

h1 span, h2 span {
    white-space: nowrap;
}

#content h1.slogan {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 60px;
}

#content h2.subslogan {
    font-size: 1.25rem; font-variation-settings: 'ital' 1, 'wght' 200;
    text-align: center;
    margin-top: 0px;
}

@media (max-width: 650px) {
    #plugin-grid {
        grid-auto-columns: 130px;
        margin-top: 40px;
    }

    .slogan {
        font-size: 2.25em !important;
    }
}

.plugin-square {
    color: royalblue;
    text-decoration: none;
    display: block;
    border: 6px solid white;
    position: relative;
}

.plugin-square-img-wrapper {
    border: 6px solid blue;
}

.plugin-square img {
    width: 100%;
    display: block;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.plugin-square:hover {
    background-color: var(--custom-color);
    background-color: #ccc;
    transition: background-color 0.15s ease-in-out;
}

/* On hover the tagline arrives as a sticker slapped onto the logo: a white
   label in the plugin's own (darkened) colour that springs up, tilted, over
   the bottom of the square. Legible because the label is solid, not because
   the logo underneath is darkened. */
.plugin-square .plugin-square-info {
    position: absolute;
    inset: 0;
    color: var(--ink, #222);
    text-decoration: none;
    pointer-events: none;
}

.plugin-square .plugin-square-info .plugin-square-name {
    display: none;
    position: absolute;
    left: 11px;
    top: 8px;
    font-size: 1.5em;
    width: 80%;
    font-variation-settings: "wght" 700, "opsz" 36;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.plugin-square .plugin-square-info .plugin-square-tagline {
    --tilt: -4deg;
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 86%;
    box-sizing: border-box;
    padding: 6px 8px 7px;
    border: 2px solid var(--ink, #222);
    border-radius: 7px;
    background: white;
    color: var(--ink, #222);
    text-align: center;
    line-height: 112%;
    font-variation-settings: "wght" 750, "opsz" 36;
    font-size: 0.83em;
    box-shadow: 3px 3px 0 var(--ink, #222);
    opacity: 0;
    transform: translate(-50%, 30%) rotate(0deg) scale(0.4);
    /* a little overshoot on the way in, a quick exit */
    transition: transform 0.18s ease-in, opacity 0.12s ease-in;
}

/* neighbouring stickers lean opposite ways, so a row does not look stamped */
.plugin-square:nth-child(even) .plugin-square-info .plugin-square-tagline {
    --tilt: 3.5deg;
}

.plugin-square:hover .plugin-square-info .plugin-square-tagline,
.plugin-square:focus-visible .plugin-square-info .plugin-square-tagline {
    opacity: 1;
    transform: translate(-50%, 0) rotate(var(--tilt)) scale(1);
    transition: transform 0.42s cubic-bezier(0.34, 1.7, 0.5, 1), opacity 0.1s ease-out;
}

/* the logo gives a small wobble as the sticker lands on it */
.plugin-square img {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plugin-square:hover img,
.plugin-square:focus-visible img {
    transform: rotate(calc(var(--tilt-logo, 1.5deg))) scale(1.04);
}

.plugin-square:nth-child(even):hover img,
.plugin-square:nth-child(even):focus-visible img {
    --tilt-logo: -1.5deg;
}

@media (prefers-reduced-motion: reduce) {
    .plugin-square img,
    .plugin-square .plugin-square-info .plugin-square-tagline {
        transition: opacity 0.15s;
    }

    .plugin-square:hover img,
    .plugin-square:focus-visible img {
        transform: none;
    }

    .plugin-square .plugin-square-info .plugin-square-tagline,
    .plugin-square:hover .plugin-square-info .plugin-square-tagline,
    .plugin-square:focus-visible .plugin-square-info .plugin-square-tagline {
        transform: translate(-50%, 0) rotate(var(--tilt));
    }
}

@media (max-width:650px) {
    .plugin-square .plugin-square-info .plugin-square-name { font-size: 1.1em; }
    .plugin-square .plugin-square-info .plugin-square-tagline { font-size: 0.7em; }
}

#plugin-grid-hovers {
    position: absolute;
    top: 0;
    left: 0;
}

.plugin-square-hover {
    background: black;
    border: 2px solid white;
    color: white;
    display: block;
    padding: 6px 10px;
    font-size: 1.2em;
    font-variation-settings: "wght" 350;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

#content .plugin-square-hover h4 {
    color: white;
    font-variation-settings: "wght" 750;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    margin-bottom: 2px;
}

#content .plugin-square-hover p {
    margin-bottom: 0;
}

.plugin-square-hover.visible {
    opacity: 1;
    visibility: visible;
}

#minidaw-wrapper {
    height: 860px;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

/* The desk the plugins are strewn across: paper ruled in fine squares, with
   a heavier line every fifth, and a wash of light from the top. */
#minidaw {
    background: #ececed;
    height: 860px;
    margin: 0 -21px;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: inset 0 14px 30px -14px rgba(0, 0, 0, 0.18);

    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%);

    overflow: hidden;
}

@media (max-width: 800px) {
    #minidaw-wrapper {
        display: none;
    }
}

@keyframes bounce {
    0% { transform: translate(0px, 0px); }
    10% { transform: translate(-6px, -50px); }
    20% { transform: translate(0px, 0px); }
}

/* each window lifts off the desk rather than sitting in a black halo */
#minidaw .plugin-screenshot {
    position: absolute;
    top: 10px;
    left: 10px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.14),
        0 10px 24px rgba(0, 0, 0, 0.18),
        0 30px 60px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s, transform 0.2s;
    /* animation: bounce 10s 1; */
}

#minidaw .plugin-screenshot:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.16),
        0 16px 34px rgba(0, 0, 0, 0.22),
        0 40px 80px rgba(0, 0, 0, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    #minidaw .plugin-screenshot {
        transition: none;
    }

    #minidaw .plugin-screenshot:hover {
        transform: none;
    }
}

#minidaw.clicked .plugin-screenshot {
    animation: none;
}

#minidaw .plugin-screenshot img {
    position: absolute;
    top: -20px;
    left: -20px;
    pointer-events: none;
}

#minidaw .plugin-screenshot a {
    position: absolute;
    top: 21px;
    left: 0px;
}

/* the same pills /plugins uses to narrow itself down, stacked on the desk */
#minidaw .categories {
    position: absolute;
    top: 30px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
    z-index: 2;
}

#minidaw h4.category {
    margin: 0;
    font-size: 15px;
    font-variation-settings: "wght" 600, "opsz" 24;
    cursor: pointer;
}

#content #minidaw h4.category a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    color: #444;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}

#content #minidaw h4.category a:hover {
    border-color: royalblue;
    color: royalblue;
}

#content #minidaw h4.category.active a {
    border-color: royalblue;
    background: royalblue;
    color: white;
}

/* how to play with it, on a card of its own so it reads over the windows */
#minidaw .instructions {
    position: absolute;
    left: 40px;
    bottom: 30px;
    z-index: 2;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #555;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-variation-settings: "ital" 1, "wght" 400, "opsz" 12;
}

.whats-new {
    max-width: var(--maxwidth);
    padding: 20px;
    margin: auto auto;
    /* text-align: center; */
    border-bottom: 1px solid #eee;
}

.whats-new-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

#content .whats-new .post {
    display: block;
    text-decoration: none;
    /* the titles are nowrap, so without this each column refuses to shrink
       past the width of its own title and the three stop tracking each other
       as the window narrows; the ellipsis takes over instead */
    min-width: 0;
}

#content .whats-new .post:last-of-type {
    border-right: none;
}

@media (max-width: 600px) {
    .whats-new-inner {
        grid-template-columns: auto;
        grid-template-rows: repeat(3, 1fr);
        row-gap: 20px;
    }
}

/* Under the three teasers, the way out to the whole blog — the same quiet
   line the featured collection uses to get to /collections. */
#content .whats-new-more {
    margin: 24px 0 4px;
    text-align: center;
    font-size: 15px;
}

#content .whats-new-more a {
    color: royalblue;
    font-variation-settings: "wght" 600, "ital" 0;
    text-decoration: none;
}

#content .whats-new-more a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#content .whats-new-more a span {
    display: inline-block;
    transition: transform 0.15s ease-out;
}

#content .whats-new-more a:hover span {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    #content .whats-new-more a span {
        transition: none;
    }
}

#content .whats-new .post h5 {
    color: #555;
    margin-bottom: 0px;
    font-size: 0.8em;
    font-variation-settings: "wght" 400, "opsz" 12, "ital" 1;
}

#content .whats-new .post h3 {
    color: royalblue;
    margin-top: 4px;
    margin-bottom: 10px;
    font-size: 1.75em;
    font-variation-settings: "wght" 800, "opsz" 36;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#content .whats-new .post:hover {
    /* background: #eee; */
    /* border: 1px solid #ddd; */
    text-decoration: underline;
}

#content .whats-new .post p {
    color: #333;
    margin-top: 10px;
}

#content .whats-new .post .img-wrapper {
    background-color: #eee;
    max-width: 540px;
    max-height: 540px;
    min-height: 100px;
}

#content .whats-new .post img {
    width: 100%;
    display: block;
}

.whats-new-videos {
    text-align: center;
    max-width: var(--maxwidth);
    margin: auto auto;
    margin-top: 22px;
    margin-bottom: 30px;
    padding: 0 20px;
}

.whats-new-grid.videos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* padding: 10px; */
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    /* max-width: 800px; */
}

@media (max-width:850px) {
    .whats-new-grid.videos {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:650px) {
    .whats-new-grid.videos {
        grid-template-columns: 1fr;
    }
}

.whats-new-grid.videos .post {
    /* height: 100%; */
    min-height: 400px;
    display: block;
    background-size: cover;
    overflow: hidden;
    text-decoration: none !important;
}

.whats-new-grid .video {
    /* height: 300px; */
    /* padding: 10px; */
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
}

.whats-new-grid .video iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.whats-new-grid .video a {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: block;
}

.whats-new-grid .video a img {
    width: 100%;
    height: 100%;
}

.whats-new-grid .video a .play-button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0,0,0,0);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
    line-height: 100px;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 6px rgba(0,0,0,0.5);
}

/* .whats-new-grid .video::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0;
    padding-bottom: calc(100% * .75);
} */

#content h2.section-header {
    text-transform: uppercase;
    letter-spacing: 10px;
    color: #555;
    margin-bottom: 0;
    padding: 20px;
    text-align: center;
    font-size: 1.2rem;
}

#content h2.section-header a {
    text-decoration: none;
}

#content #whats-new h2.section-header {
    letter-spacing: 4px;
}

#testimonials {
    border-top: 1px solid #eee;
    margin-bottom: 40px;
}

#testimonials .testimonial-list {
    display: flex;
    column-gap: 20px;
}

@media (max-width: 1200px) {
    #testimonials .testimonial:nth-last-of-type(-n+1) {
        display: none;
    }
}

@media (max-width: 900px) {
    #testimonials .testimonial:nth-last-of-type(-n+2) {
        display: none;
    }
}

@media (max-width: 660px) {
    #testimonials .testimonial-list {
        flex-direction: column;
    }

    #testimonials .testimonial {
        margin: 1px 0px !important;
    }

    #testimonials .testimonial:first-of-type {
        margin: 0px 0px 1px !important;
    }
}

#testimonials .testimonial {
    font-size: 0.9em;
    /* padding: 10px; */
    margin: 0px 1px;
    background: white;
    min-width: 180px;
}

#testimonials .testimonial .quotation {
    display: inline-block;
    margin-bottom: -10px;
}

#testimonials .testimonial strong {
    display: block;
    text-decoration: none;
    text-align: right;
    font-variation-settings: "wght" 700;
}

#testimonials .testimonial strong span {
    font-variation-settings: "wght" 400;
    color: #ccc;
    margin-right: 3px;
}

#testimonials .testimonial a.testifier:hover {
    color: deeppink;
}

#testimonials .testimonial a.testifier span {
    color: #ccc;
    margin-right: 5px;
}

#testimonials .testimonial .bio {
    display: inline-block;
    width: 100%;
}

#testimonials .testimonial .bio p {
    margin-bottom: 0px !important;
    font-variation-settings: "wght" 300, "ital" 1;
    font-size: 0.9em;
    color: #555;
    text-align: right;
    padding-left: 10px;
}