:root {
    --typography-spacing-vertical: 1rem;
}

@media (min-width: 576px) {
    body > header,
    body > main,
    body > footer,
    section {
        --block-spacing-vertical: calc(var(--spacing) * 1);
    }
}
@media (min-width: 768px) {
    body > header,
    body > main,
    body > footer,
    section {
        --block-spacing-vertical: calc(var(--spacing) * 1);
    }
}
@media (min-width: 992px) {
    body > header,
    body > main,
    body > footer,
    section {
        --block-spacing-vertical: calc(var(--spacing) * 1.5);
    }
}
@media (min-width: 1200px) {
    body > header,
    body > main,
    body > footer,
    section {
        --block-spacing-vertical: calc(var(--spacing) * 2);
    }
}

h3 {
    --typography-spacing-vertical: 1rem;
}

img.logo {
    width: 1.5rem;
}
img.icon {
    vertical-align: text-bottom;
    width: 1rem;
}
img.platform {
    height: 1rem;
}

a.link-icon {
    display: inline-block;
    line-height: 1;
    text-decoration: none !important;
}

.counter {
    padding: 0 var(--spacing);
    line-height: 1;
}
.counter__factoid {
    font-size: 3rem;
    font-weight: bold;
}

.package {
    display: grid;
    grid-template-rows: auto 1fr auto;

    margin-bottom: var(--spacing);
    padding: var(--spacing);
    border: 1px solid var(--form-element-border-color);
    border-radius: var(--border-radius);
}
.package__author {
    color: var(--muted-color);
}
.package__install input {
    height: unset;
    margin: unset;
    padding: unset;
    border: unset;

    outline: none;
    cursor: pointer;
    color: var(--color);

    font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
        "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    font-size: 0.8em;
}
.package__install input:focus {
    box-shadow: unset;
}