#objects {
    width: min(96vw, 980px);
    height: 62dvh;
    margin: 0.5em 0;
}

.count-objects {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vw, 32px);
}

.count-objects.count {
    flex-wrap: wrap;
    align-content: center;
    gap: clamp(4px, 1.2vw, 12px);
}

#objects.count-objects.sumSm,
#objects.count-objects.compareSm,
#objects.count-objects.sumNum,
#objects.count-objects.compareNum {
    --formula-sign-slot: clamp(72px, 9vw, 108px);
    --formula-type-size: clamp(4.8rem, 11vw, 8rem);
    --formula-object-size: var(--formula-density-size, clamp(48px, 5vw, 76px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--formula-sign-slot) minmax(0, 1fr);
    grid-template-rows: 100%;
    align-items: stretch;
    justify-items: stretch;
    column-gap: clamp(12px, 2.5vw, 28px);
    height: clamp(220px, 52dvh, 440px);
    overflow: visible;
}

.count-group {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    max-width: none;
    box-sizing: border-box;
}

.formula-side {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: clamp(2px, 0.6vw, 8px);
}

.side-a {
    grid-column: 1;
}

.side-b {
    grid-column: 3;
}

.formula-side.is-smiles {
    display: grid;
    grid-template-columns: repeat(var(--formula-cols), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    gap: clamp(4px, 1vw, 10px);
}

.formula-side.is-number {
    display: flex;
}

.count-sign {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-main);
    font-weight: 900;
    font-size: var(--formula-type-size);
    line-height: 0.85;
    transform: translateY(-0.04em);
}

.object {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(100px, 5dvw, 200px);
    height: clamp(100px, 5dvw, 200px);
    min-width: 0;
    min-height: 0;
}

.formula-side.is-smiles .object,
.formula-side.is-number .object {
    width: var(--formula-object-size) !important;
    height: var(--formula-object-size) !important;
    max-width: 100%;
    max-height: 100%;
}

.formula-side.is-number .object span {
    font-size: var(--formula-type-size) !important;
    line-height: 0.85;
}

.formula-side.is-smiles .object span {
    font-size: var(--formula-object-size) !important;
    line-height: 1;
}

#objects span {
    animation: bounce 0.6s ease;
    color: var(--text-main);
    font-weight: bold;
}

.object img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    animation: bounce 0.6s ease;
}

@media (max-width: 500px) {
    #objects {
        height: 62dvh;
    }

    #objects.count-objects.sumSm,
    #objects.count-objects.compareSm,
    #objects.count-objects.sumNum,
    #objects.count-objects.compareNum {
        --formula-sign-slot: clamp(58px, 10dvh, 82px);
        --formula-type-size: clamp(4rem, 16vw, 6.4rem);
        --formula-object-size: clamp(30px, 10vw, 44px);
        width: min(92vw, 420px);
        height: clamp(300px, 48dvh, 450px);
        grid-template-columns: 100%;
        grid-template-rows: minmax(0, 1fr) var(--formula-sign-slot) minmax(0, 1fr);
        column-gap: 0;
        row-gap: clamp(6px, 1.6dvh, 12px);
    }

    .side-a {
        grid-column: 1;
        grid-row: 1;
    }

    .count-sign {
        grid-column: 1;
        grid-row: 2;
    }

    .side-b {
        grid-column: 1;
        grid-row: 3;
    }

    #objects.count-objects.sumSm,
    #objects.count-objects.compareSm {
        --formula-object-size: min(var(--formula-density-size, 44px), 44px);
    }
}

@media (orientation: portrait) and (max-width: 900px) {
    #objects.count-objects.sumSm,
    #objects.count-objects.compareSm,
    #objects.count-objects.sumNum,
    #objects.count-objects.compareNum {
        --formula-sign-slot: clamp(54px, 8dvh, 76px);
        --formula-type-size: clamp(3.6rem, 12vw, 5.6rem);
        --formula-object-size: clamp(30px, 9vw, 44px);
        width: min(92vw, 420px);
        height: clamp(300px, 48dvh, 450px);
        grid-template-columns: 100%;
        grid-template-rows: minmax(0, 1fr) var(--formula-sign-slot) minmax(0, 1fr);
        column-gap: 0;
        row-gap: clamp(6px, 1.6dvh, 12px);
    }

    .side-a {
        grid-column: 1;
        grid-row: 1;
    }

    .count-sign {
        grid-column: 1;
        grid-row: 2;
    }

    .side-b {
        grid-column: 1;
        grid-row: 3;
    }

    #objects.count-objects.sumSm,
    #objects.count-objects.compareSm {
        --formula-object-size: min(var(--formula-density-size, 44px), 44px);
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    #objects {
        height: calc(100dvh - 210px);
        min-height: 100px;
        margin: 0.25em 0;
    }

    #objects.count-objects.sumSm,
    #objects.count-objects.compareSm,
    #objects.count-objects.sumNum,
    #objects.count-objects.compareNum {
        --formula-sign-slot: clamp(58px, 9vw, 82px);
        --formula-type-size: clamp(3.8rem, 17dvh, 5.2rem);
        --formula-object-size: var(--formula-density-size, 44px);
        width: min(94vw, 900px);
        height: calc(100dvh - 210px);
        min-height: 100px;
        grid-template-columns: minmax(0, 1fr) var(--formula-sign-slot) minmax(0, 1fr);
        grid-template-rows: 100%;
        column-gap: clamp(8px, 2vw, 18px);
        row-gap: 0;
    }

    .side-a {
        grid-column: 1;
        grid-row: 1;
    }

    .count-sign {
        grid-column: 2;
        grid-row: 1;
    }

    .side-b {
        grid-column: 3;
        grid-row: 1;
    }

    .formula-side {
        padding: 2px;
    }

    .many-objects .object {
        width: clamp(34px, 5dvw, 48px) !important;
        height: clamp(34px, 5dvw, 48px) !important;
    }

    .many-objects .object span {
        font-size: clamp(34px, 5dvw, 48px) !important;
    }
}