section.glyph-section {
    position: relative;
    background-color: var(--white);
    padding: .2rem 0
}

section.glyph-section .line-label {
    margin-bottom: .5rem
}

section.glyph-section .line-label .line {
    background-color: var(--black)
}

section.glyph-section .line-label .label {
    font-weight: 400;
    color: var(--black)
}

section.glyph-section .intro {
    display: flex;
    justify-content: space-between;
    gap: .2rem;
    margin-bottom: 1.08rem
}

section.glyph-section .intro .inner {
    border-top: .02rem solid var(--black);
    padding-top: .07rem
}

section.glyph-section .intro .inner:first-child {
    flex-grow: 1
}

section.glyph-section .intro .inner:last-child {
    width: 3.35rem
}

section.glyph-section .intro .title {
    font-size: .72rem;
    letter-spacing: -0.01em;
    line-height: 1em;
    font-weight: 500;
    color: var(--black)
}

section.glyph-section .intro .text {
    font-size: .16rem;
    line-height: 1.2em;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--black);
    max-width: 3.34rem
}

section.glyph-section .arhitekt-block {
    display: flex;
    justify-content: center;
    margin-bottom: .2rem
}

section.glyph-section .arhitekt-block .inner:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    width: 6.9rem
}

section.glyph-section .arhitekt-block .media-frame {
    width: 3.3495rem;
    aspect-ratio: 1
}

section.glyph-section .arhitekt-block .media-frame.big {
    width: 6.9rem
}

section.glyph-section .arhitekt-block .rotation-frame {
    background-color: var(--background)
}

section.glyph-section .circle-animation {
    display: flex;
    gap: .2rem
}

section.glyph-section .circle-animation .inner:first-child {
    position: relative;
    width: 3.35rem
}

section.glyph-section .circle-animation .inner:last-child {
    flex-grow: 1
}

section.glyph-section .circle-animation .media-frame {
    aspect-ratio: 1;
    background-color: var(--black);
    overflow: hidden
}

section.glyph-section .circle-animation .media-frame .media {
    backface-visibility: hidden
}

section.glyph-section .circle-animation .text {
    font-size: .13rem;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: var(--black);
    max-width: 2.17rem
}

section.glyph-section .circle-animation .mobile-text {
    display: none
}

section.glyph-section .circle-animation .sticky {
    display: block
}

section.glyph-section .circle-animation .sticky .text {
    margin-top: .2rem
}

@media screen and (max-width: 768px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
    section.glyph-section {
        padding-bottom: .8rem
    }

    section.glyph-section .intro {
        display: block;
        border-top: .01rem solid var(--black);
        margin-bottom: 1.6rem
    }

    section.glyph-section .intro .title {
        font-size: .52rem;
        line-height: .9em;
        margin-bottom: .4rem
    }

    section.glyph-section .intro .text {
        font-size: .14rem;
        letter-spacing: -0.04em
    }

    section.glyph-section .intro .inner {
        border: none;
        padding: 0;
        padding-top: .03rem;
        max-width: 2.72rem
    }

    section.glyph-section .intro .inner:first-child {
        max-width: none
    }

    section.glyph-section .arhitekt-block {
        flex-direction: column-reverse;
        flex-wrap: wrap
    }

    section.glyph-section .arhitekt-block .media-frame {
        width: 100%
    }

    section.glyph-section .arhitekt-block .media-frame.big {
        width: 100%
    }

    section.glyph-section .arhitekt-block .media-frame.mobile {
        display: block
    }

    section.glyph-section .arhitekt-block .inner {
        width: 100%
    }

    section.glyph-section .arhitekt-block .inner:first-child {
        width: 100%;
        gap: .12rem
    }

    section.glyph-section .arhitekt-block .inner:first-child .media-frame {
        width: 1.69rem
    }

    section.glyph-section .arhitekt-block .inner:first-child .media-frame.big {
        width: 100%
    }

    section.glyph-section .circle-animation {
        display: block
    }

    section.glyph-section .circle-animation .sticky {
        display: flex;
        align-items: flex-end;
        gap: .12rem;
        margin-bottom: .2rem
    }

    section.glyph-section .circle-animation .sticky .media {
        width: 1.7rem
    }

    section.glyph-section .circle-animation .media-frame {
        overflow: hidden;
        aspect-ratio: 352/440;
        left: -0.12rem;
        width: calc(100% + .24rem)
    }

    section.glyph-section .circle-animation .media-frame .media {
        inset: auto;
        top: 0;
        left: -25%;
        width: 150%;
        max-width: none;
        object-fit: cover
    }

    section.glyph-section .circle-animation .mobile-text {
        display: block;
        font-size: .13rem;
        line-height: 1.2em;
        font-weight: 400;
        letter-spacing: -0.04em;
        color: var(--black);
        max-width: 2.72rem;
        margin-top: .2rem
    }

    section.glyph-section .circle-animation .inner:first-child {
        width: 100%
    }

    section.glyph-section .circle-animation .inner:last-child {
        position: relative
    }
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
    section.glyph-section .intro {
        flex-direction: column;
        align-items: flex-start;
        gap: .28rem
    }

    section.glyph-section .intro .inner:last-child {
        width: 100%;
        max-width: min(3.35rem, 100%)
    }

    section.glyph-section .intro .text {
        max-width: min(3.34rem, 100%)
    }

    section.glyph-section .arhitekt-block .inner:first-child {
        width: 100%;
        max-width: 6.9rem;
        justify-content: center
    }
}

/*# sourceMappingURL=style.css.map */