

.vs__banner {
    position: relative;
    height: 8.333vw;
    background: #f2f2f2 no-repeat center/cover;
}

.vs__head {
    max-width: 89.583vw;
    margin-inline: auto;
    padding: 0 .781vw;
}

.vs__id {
    display: flex;
    align-items: flex-end;
    gap: .781vw;
    margin-top: -2.344vw;
    padding-bottom: 1.042vw;
}

.vs__id--no-banner {
    margin-top: 1.302vw;
}

.vs__logo {
    width: 4.687vw;
    height: 4.687vw;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: .156vw solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.vs__logo--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.302vw;
    font-weight: 700;
    color: #fff;
    background: var(--c-green);
}

.vs__meta {
    padding-bottom: .26vw;
}

.vs__name {
    margin: 0;
    font-size: 1.042vw;
    font-weight: 700;
    color: var(--c-ink);
}

.vs__tag {
    margin: .13vw 0 0;
    color: #555;
}

.vs__links {
    display: flex;
    flex-wrap: wrap;
    gap: .521vw;
    margin-top: .391vw;
}

.vs__links a {
    font-size: .729vw;
    font-weight: 600;
    text-decoration: none;
    color: var(--c-green);
}

.vs__links a:hover {
    text-decoration: underline;
}

.vs__about {
    max-width: 89.583vw;
    margin: 0 auto 1.302vw;
    padding: 0 .781vw;
    color: #444;
    line-height: 1.7;
}

.vs__products {
    max-width: 89.583vw;
    margin-inline: auto;
    padding: 0 .781vw 2.604vw;
}

.vs__products-h {
    margin: 0 0 .781vw;
    font-size: .833vw;
    font-weight: 700;
    color: var(--c-ink);
}

.vs__products .pc__media {
    height: auto;
    aspect-ratio: 3 / 4;
}

.vs__empty {
    padding: 2.083vw 0;
    text-align: center;
    color: #777;
}


/* Phone canvas. Everything above is sized against the 1920 design;
   these are the same values against 440, the width the theme itself
   uses below 767px. Only sizes are restated — layout, colour and
   everything else carries down from the rules above. */
@media (max-width: 767px) {
    .vs__banner {
        height: 36.364vw;
    }

    .vs__head {
        max-width: 390.909vw;
        padding: 0 3.409vw;
    }

    .vs__id {
        gap: 3.409vw;
        margin-top: -10.227vw;
        padding-bottom: 4.545vw;
    }

    .vs__id--no-banner {
        margin-top: 5.682vw;
    }

    .vs__logo {
        width: 20.455vw;
        height: 20.455vw;
        border: .682vw solid #fff;
    }

    .vs__logo--ph {
        font-size: 5.682vw;
    }

    .vs__meta {
        padding-bottom: 1.136vw;
    }

    .vs__name {
        font-size: 4.545vw;
    }

    .vs__tag {
        margin: .568vw 0 0;
    }

    .vs__links {
        gap: 2.273vw;
        margin-top: 1.705vw;
    }

    .vs__links a {
        font-size: 3.182vw;
    }

    .vs__about {
        max-width: 390.909vw;
        margin: 0 auto 5.682vw;
        padding: 0 3.409vw;
    }

    .vs__products {
        max-width: 390.909vw;
        padding: 0 3.409vw 11.364vw;
    }

    .vs__products-h {
        margin: 0 0 3.409vw;
        font-size: 3.636vw;
    }

    .vs__empty {
        padding: 9.091vw 0;
    }
}
@media (max-width: 640px) {
    .vs__banner {
        height: 22.727vw;
    }

    .vs__id {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -7.955vw;
        gap: 2.273vw;
    }

    .vs__logo {
        width: 14.773vw;
        height: 14.773vw;
    }
}
