.tessella-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
    margin: 1.5em 0;
}

.tessella-gallery figure {
    margin: 0;
    text-align: center;
}

.tessella-gallery figure img {
    max-width: 100%;
    background-color: #18171C;
    border: 1px solid #343340;
    border-radius: 8px;
    padding: 10px;
}

.tessella-gallery figcaption {
    margin-top: 8px;
}

.tessella-gallery figcaption p {
    font-size: 0.9em;
    color: #55606e;
}

.tessella-examples {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 28px;
    margin: 1.5em 0;
}

.tessella-examples figure {
    margin: 0;
    text-align: center;
}

.tessella-examples figure img {
    max-width: 100%;
    background-color: #18171C;
    border: 1px solid #343340;
    border-radius: 10px;
    padding: 10px;
}

.tessella-examples figcaption {
    margin-top: 8px;
}

.tessella-examples figcaption p {
    font-size: 0.95em;
    color: #55606e;
}

.tessella-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin: 1.5em 0 2em 0;
}

.tessella-hero figure {
    margin: 0;
    text-align: center;
}

.tessella-hero figure img {
    max-width: 100%;
    background-color: #18171C;
    border: 1px solid #343340;
    border-radius: 10px;
    padding: 10px;
}

.tessella-hero figcaption p {
    font-size: 0.9em;
    color: #55606e;
}

.tessella-swatch {
    margin: 1.2em 0;
}

.tessella-swatch img {
    max-width: 100%;
    background-color: #18171C;
    border: 1px solid #343340;
    border-radius: 8px;
    padding: 10px;
}