/* FK Audio Suite: what the package does not bring. Colours come from the site's tokens. */

/* Screenshots of a plugin: a grid of figures, each with a short caption. */
.fk-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.fk-gallery figure { margin: 0; }
.fk-gallery img { display: block; width: 100%; height: auto; border-radius: var(--fkw-radius); border: 1px solid var(--fkw-color-border); box-shadow: var(--fkw-shadow); }
.fk-gallery figcaption { margin-top: .6rem; font-size: .9rem; color: var(--fkw-color-muted); }
.fk-gallery a { display: block; }

/* One product with its picture: home page. */
.fk-showcase { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .fk-showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.fk-showcase img { display: block; width: 100%; height: auto; border-radius: var(--fkw-radius); border: 1px solid var(--fkw-color-border); box-shadow: var(--fkw-shadow); }
.fk-showcase ul { margin: 1rem 0 1.5rem; padding-left: 1.2rem; }
.fk-showcase li + li { margin-top: .35rem; }
.fk-price { font-size: 1.1rem; }

/* Product box above a plan on the pricing page. */
.fk-plan__image { display: block; width: 100%; height: 10rem; object-fit: contain; margin: 0 0 .5rem; }

/* The product box at the top of a plugin page: a picture, not a banner. */
.fkw-prose img[src*="/boxes/"] { max-width: min(100%, 26rem); }

/* Below the footer: who made the site. */
.fk-madeby { margin: 1rem 0 0; font-size: .85rem; text-align: center; }
.fk-madeby a { text-decoration: underline; text-underline-offset: .2em; }