.logo-icon {
    width: 1em;
    height: 1em;
    mask-size: contain;
    background-image: var(--text);
}

.tag .logo-icon {
    background-color: var(--tag-color);
    margin-right: 0.5em;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.forge-logo {
    -webkit-mask-image: var(--forge-logo);
    mask-image: var(--forge-logo);
}

.fabric-logo {
    -webkit-mask-image: var(--fabric-logo);
    mask-image: var(--fabric-logo);
}

.mc-logo {
    -webkit-mask-image: var(--mc-logo);
    mask-image: var(--mc-logo);
}

.version-info {
    font-size: 2em;
    display: flex;
    border-bottom: 1px solid #0005;
}

.downloads {
    font-size: 2em;
    display: flex;
}
.version-info .tag,
.downloads .tag {
    /* max-width: 10em; */
    min-width: 7em;
    box-sizing: border-box;
}

.downloads .tag::before {
    height: 1em;
    width: 1em;

    -webkit-mask-image: var(--download-icon);
    mask-image: var(--download-icon);

    -webkit-mask-size: contain;
    mask-size: contain;

    background-color: var(--tag-color);
    content: "";
    display: block;
}

.warning {
    color: var(--gum-red);
    font-weight: 600;
}

.warning::before,
.warning::after {
    content: "❗️";
}

.image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image p {
    opacity: 0.6;
    font-size: 0.9em;
}

.image_compare {
    display: flex;
}

.image_compare > *:first-child::before {
    content: "👎🏻🤨";
    font-size: 1.5em;
    margin: 0.5em;
    display: block;
}

.image_compare > * {
    margin: 0.25em;
}

.image_compare > *:last-child::before {
    content: "👍🏻🤯";
    font-size: 1.5em;
    margin: 0.5em;
    display: block;
}

img {
    max-width: min(100%, 40em);
    border-radius: 0.3em;
}

code {
    padding: 0.2em 0.4em;
    background: var(--input);
    border-radius: 0.4em;
    display: inline-block;
}

.pack-logo {
    width: 16em;
    height: 16em;
}

li {
    text-align: left;
}

.note {
    opacity: 0.6;
}

.optimizations {
    margin-top: 0;
}