/* ================================================================
   HOTEL 164
   ABOUT PAGE
================================================================ */


/* ================================================================
   01 — ABOUT HERO
================================================================ */

.about-hero {

    position: relative;

    min-height: 100svh;

    overflow: hidden;

    display: grid;

    isolation: isolate;

    background: #071318;
}


.about-hero__media {

    position: absolute;

    z-index: -6;

    inset: -4%;

    overflow: hidden;
}


.about-hero__media img {

    width: 100%;
    height: 108%;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.68)
        contrast(1.06)
        brightness(.73);

    transform:
        scale(1.04);
}


.about-hero__overlay {

    position: absolute;

    z-index: -5;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(3, 7, 9, .62) 0%,
            rgba(4, 10, 13, .16) 38%,
            rgba(5, 13, 17, .48) 72%,
            #071419 100%
        ),

        linear-gradient(
            90deg,
            rgba(3, 8, 11, .55),
            transparent 48%,
            rgba(4, 8, 10, .18)
        );
}


.about-hero__blue {

    position: absolute;

    z-index: -4;

    inset: 0;

    background:

        radial-gradient(
            circle at 72% 27%,
            rgba(71, 104, 173, .38),
            transparent 34%
        ),

        radial-gradient(
            circle at 20% 75%,
            rgba(24, 69, 82, .36),
            transparent 28%
        );
}


.about-hero__grid {

    position: absolute;

    z-index: -3;

    inset: 0;

    opacity: .09;

    background-image:

        linear-gradient(
            rgba(255,255,255,.2) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.2) 1px,
            transparent 1px
        );

    background-size:
        150px
        150px;

    mask-image:

        linear-gradient(
            90deg,
            transparent,
            #000 30%,
            #000 70%,
            transparent
        );
}


.about-hero__inner {

    min-height: 100svh;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;

    padding-top:
        calc(
            var(--header-height)
            + 2.5rem
        );

    padding-bottom:
        2.7rem;
}


/* TOP COORDINATES */

.about-hero__top {

    display: flex;

    align-items: center;

    gap: 1rem;

    color:
        rgba(255,255,255,.5);

    font-size: .5rem;

    font-weight: 600;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.about-hero__top i {

    width: 38px;

    height: 1px;

    background:
        rgba(255,255,255,.25);
}


/* HERO TITLE */

.about-hero__content {

    align-self: center;

    max-width: 1100px;

    padding-left:
        clamp(0rem, 7vw, 8rem);
}


.about-hero__title {

    max-width: 950px;

    margin: 0;

    color: var(--white);

    font-family: var(--font-display);

    font-size:
        clamp(
            4.5rem,
            10vw,
            10rem
        );

    font-weight: 400;

    line-height: .82;

    letter-spacing: -.04em;
}


.about-hero__title em {

    display: block;

    color:
        var(--gold-light);

    font-style: normal;

    padding-left:
        clamp(
            2rem,
            9vw,
            10rem
        );
}


.about-hero__intro {

    max-width: 460px;

    margin:
        2.5rem
        0
        0
        clamp(2rem, 9vw, 10rem);

    color:
        rgba(255,255,255,.67);

    font-size:
        clamp(
            .75rem,
            1vw,
            .9rem
        );

    font-weight: 300;

    letter-spacing: .04em;
}


/* HERO BOTTOM */

.about-hero__bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.about-hero__index {

    color:
        rgba(255,255,255,.38);

    font-size: .5rem;

    font-weight: 600;

    letter-spacing: .2em;
}


/* FLOATING CARD */

.about-hero-card {

    position: absolute;

    z-index: 5;

    right:
        max(
            var(--container),
            calc((100vw - 1750px) / 2 + var(--container))
        );

    top: 28%;

    width: 240px;

    padding:
        1.5rem;

    transition:
        transform .5s var(--ease),
        background .4s ease;
}


.about-hero-card:hover {

    transform:
        translateY(-7px);

    background:
        rgba(10, 27, 34, .70);
}


.about-hero-card > span {

    color:
        var(--gold-light);

    font-size: .46rem;

    font-weight: 600;

    letter-spacing: .23em;

    text-transform: uppercase;
}


.about-hero-card p {

    margin:
        .9rem
        0
        1.2rem;

    color: var(--white);

    font-family: var(--font-display);

    font-size: 1.45rem;

    line-height: 1.2;
}


.about-hero-card i {

    color:
        var(--gold-light);

    font-style: normal;
}



/* ================================================================
   02 — STORY
================================================================ */

.about-story {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:

        linear-gradient(
            145deg,
            #071419 0%,
            #0a1b20 48%,
            #061014 100%
        );
}


.about-story__orb {

    position: absolute;

    top: 5%;

    right: -20%;

    width: 700px;

    height: 700px;

    border-radius: 50%;

    opacity: .18;

    background:

        radial-gradient(
            circle,
            #315b91,
            #123640 38%,
            transparent 70%
        );

    filter: blur(30px);
}


.about-story__grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        .85fr;

    align-items: center;

    gap:
        clamp(
            4rem,
            10vw,
            10rem
        );
}


.about-story__copy {

    max-width: 680px;
}


.about-story__visual {

    position: relative;

    width:
        min(
            100%,
            560px
        );

    margin-left: auto;

    padding:
        2rem
        0
        3rem
        3rem;
}


.about-story__image {

    position: relative;

    width: 85%;

    aspect-ratio:
        4 / 5.2;

    margin-left: auto;

    overflow: hidden;

    border:
        1px solid
        var(--line);

    background: #111;
}


.about-story__image::before {

    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    box-shadow:

        inset
        0
        0
        70px
        rgba(0,0,0,.22);

    pointer-events: none;
}


.about-story__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        saturate(.72)
        contrast(1.04);

    transition:
        transform
        1.1s
        var(--ease);
}


.about-story__image:hover img {

    transform:
        scale(1.045);
}


.about-story__floating {

    position: absolute;

    z-index: 4;

    bottom: 0;

    left: 0;

    display: flex;

    align-items: center;

    gap: 1.3rem;

    min-width: 250px;

    padding:
        1.2rem
        1.4rem;
}


.about-story__floating-number {

    color:
        var(--gold-light);

    font-family:
        var(--font-display);

    font-size: 2.8rem;

    line-height: 1;
}


.about-story__floating div {

    display: grid;

    gap: .1rem;
}


.about-story__floating small {

    color:
        var(--grey-500);

    font-size: .45rem;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.about-story__floating strong {

    font-family:
        var(--font-display);

    font-size: 1.35rem;

    font-weight: 400;
}


.about-story__line {

    position: absolute;

    top: 4%;

    left: 3rem;

    width: 1px;

    height: 66%;

    background:

        linear-gradient(
            var(--gold),
            rgba(255,255,255,.1),
            transparent
        );
}



/* ================================================================
   03 — BRAND STATEMENT
================================================================ */

.about-statement {

    position: relative;

    overflow: hidden;

    padding:
        clamp(
            8rem,
            15vw,
            15rem
        )
        0;

    text-align: center;

    background:
        #050a0d;
}


.about-statement__glow {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 800px;

    max-width: 90vw;

    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    background:

        radial-gradient(
            circle,
            rgba(60, 94, 162, .23),
            rgba(184,155,94,.06) 35%,
            transparent 68%
        );

    filter: blur(18px);
}


.about-statement__inner {

    position: relative;

    z-index: 2;

    max-width: 1100px;

    margin: auto;
}


.about-statement__mark {

    display: block;

    margin-bottom: 2rem;

    color:
        var(--gold-light);

    font-size: 1.2rem;
}


.about-statement p {

    margin-bottom: 1.5rem;

    color:
        var(--grey-500);

    font-size: .5rem;

    font-weight: 600;

    letter-spacing: .28em;

    text-transform: uppercase;
}


.about-statement blockquote {

    margin: 0;

    color: var(--white);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3rem,
            6.5vw,
            6.8rem
        );

    font-weight: 400;

    line-height: .98;
}


.about-statement blockquote em {

    display: block;

    color:
        var(--gold-light);

    font-style: normal;
}


.about-statement__signature {

    display: block;

    margin-top: 2.5rem;

    color:
        rgba(255,255,255,.34);

    font-size: .46rem;

    font-weight: 600;

    letter-spacing: .24em;

    text-transform: uppercase;
}



/* ================================================================
   04 — IDENTITY
================================================================ */

.about-identity {

    position: relative;

    padding:
        var(--section-space)
        0;

    overflow: hidden;

    background:

        linear-gradient(
            155deg,
            #07151a,
            #091b20 50%,
            #061014
        );
}


.about-identity__heading {

    display: grid;

    grid-template-columns:
        1.2fr
        .65fr;

    gap:
        4rem;

    align-items: end;

    margin-bottom:
        clamp(
            4rem,
            8vw,
            8rem
        );
}


.about-identity__intro {

    max-width: 500px;

    margin: 0;

    padding-bottom: .8rem;

    color:
        var(--grey-400);

    font-size: .75rem;

    font-weight: 300;
}


/* IDENTITY CARDS */

.identity-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid
        var(--line);

    border-bottom:
        1px solid
        var(--line);
}


.identity-card {

    position: relative;

    min-height: 410px;

    padding:
        2rem
        1.8rem
        2.5rem;

    overflow: hidden;

    border-right:
        1px solid
        var(--line);

    transition:

        background
        .5s
        ease,

        transform
        .5s
        var(--ease);
}


.identity-card:last-child {

    border-right: 0;
}


.identity-card::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    background:

        radial-gradient(
            circle at 50% 120%,
            rgba(76,108,177,.27),
            transparent 58%
        );

    transition:
        opacity
        .5s
        ease;
}


.identity-card:hover {

    background:
        rgba(255,255,255,.022);

    transform:
        translateY(-5px);
}


.identity-card:hover::before {

    opacity: 1;
}


.identity-card__number {

    position: relative;

    z-index: 2;

    color:
        rgba(255,255,255,.3);

    font-family:
        var(--font-display);

    font-size: 1.2rem;
}


.identity-card__icon {

    position: relative;

    z-index: 2;

    margin:
        4rem
        0
        2.5rem;

    color:
        var(--gold-light);

    font-size: 2rem;
}


.identity-card h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 1rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.7rem,
            2.6vw,
            2.5rem
        );

    font-weight: 400;
}


.identity-card p {

    position: relative;

    z-index: 2;

    color:
        var(--grey-500);

    font-size: .67rem;

    line-height: 1.8;
}


.identity-card__line {

    position: absolute;

    right: 1.8rem;

    bottom: 1.7rem;

    left: 1.8rem;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            var(--gold),
            rgba(255,255,255,.08),
            transparent
        );

    transform:
        scaleX(.2);

    transform-origin:
        left;

    transition:
        transform
        .6s
        var(--ease);
}


.identity-card:hover
.identity-card__line {

    transform:
        scaleX(1);
}



/* ================================================================
   05 — ABOUT NUMBERS
================================================================ */

.about-numbers {

    border-top:
        1px solid
        var(--line-soft);

    border-bottom:
        1px solid
        var(--line-soft);

    background:

        linear-gradient(
            90deg,
            #050b0d,
            #0b1f25,
            #071217,
            #050b0d
        );
}


.about-numbers__grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.about-number {

    padding:
        clamp(
            2.8rem,
            5vw,
            4.5rem
        )
        1.5rem;

    text-align: center;

    border-right:
        1px solid
        var(--line-soft);
}


.about-number:last-child {

    border-right: 0;
}


.about-number strong {

    display: block;

    color: var(--white);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3.4rem,
            6vw,
            6rem
        );

    font-weight: 400;

    line-height: 1;
}


.about-number span {

    display: block;

    margin-top: .7rem;

    color:
        var(--grey-500);

    font-size: .46rem;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;
}



/* ================================================================
   06 — LOCATION
================================================================ */

.about-location {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:
        #071115;
}


.about-location__blue {

    position: absolute;

    top: -25%;

    left: -20%;

    width: 70vw;

    max-width: 1000px;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .18;

    background:

        radial-gradient(
            circle,
            #315995,
            #113342 43%,
            transparent 68%
        );

    filter: blur(28px);
}


.about-location__grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        .9fr
        1fr;

    gap:
        clamp(
            4rem,
            10vw,
            10rem
        );

    align-items: center;
}


.about-location__visual {

    position: relative;
}


.about-location__image {

    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    border:
        1px solid
        var(--line);
}


.about-location__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        saturate(.76)
        contrast(1.04);
}


.about-location__image-shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 45%,
            rgba(3,7,9,.72)
        );
}


.about-location__image figcaption {

    position: absolute;

    left: 1.5rem;

    bottom: 1.5rem;

    display: grid;
}


.about-location__image figcaption span {

    color:
        var(--gold-light);

    font-size: .46rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.about-location__image figcaption strong {

    color: var(--white);

    font-family:
        var(--font-display);

    font-size: 2.6rem;

    font-weight: 400;
}


.location-coordinate {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 1.5rem;

    color:
        var(--grey-500);

    font-size: .45rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.location-coordinate i {

    width: 40px;

    height: 1px;

    background:
        rgba(255,255,255,.15);
}


.about-location__copy {

    max-width: 680px;
}


.location-address {

    display: grid;

    grid-template-columns:
        100px
        1fr;

    margin-top: 2rem;

    padding:
        1.5rem
        0;

    border-top:
        1px solid
        var(--line);

    border-bottom:
        1px solid
        var(--line);
}


.location-address > span {

    color:
        var(--gold-light);

    font-size: .47rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.location-address p {

    margin: 0;

    color:
        var(--grey-300);

    font-size: .68rem;
}



/* ================================================================
   07 — EXPERIENCE BAND
================================================================ */

.about-experience-band {

    overflow: hidden;

    border-top:
        1px solid
        var(--line-soft);

    border-bottom:
        1px solid
        var(--line-soft);

    background:

        linear-gradient(
            90deg,
            #071218,
            #0c242b,
            #071218
        );
}


.about-experience-band__track {

    display: flex;

    align-items: center;

    width: max-content;

    animation:
        aboutBandScroll
        32s
        linear
        infinite;
}


.about-experience-band:hover
.about-experience-band__track {

    animation-play-state: paused;
}


.about-experience-band span {

    padding:
        1.4rem
        2.5rem;

    color:
        rgba(255,255,255,.62);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );
}


.about-experience-band i {

    color:
        var(--gold);

    font-size: .7rem;
}


@keyframes aboutBandScroll {

    to {

        transform:
            translateX(-25%);

    }

}



/* ================================================================
   08 — PHILOSOPHY
================================================================ */

.about-philosophy {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:

        linear-gradient(
            145deg,
            #061014,
            #0a1c22,
            #060c0f
        );
}


.about-philosophy__orb {

    position: absolute;

    right: -15%;

    bottom: -35%;

    width: 850px;

    max-width: 80vw;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .18;

    background:

        radial-gradient(
            circle,
            #385d99,
            #12313d 45%,
            transparent 70%
        );
}


.about-philosophy__top {

    position: relative;

    z-index: 2;

    margin-bottom:
        clamp(
            4rem,
            8vw,
            8rem
        );
}


.about-philosophy__top
.display-title {

    max-width: 1000px;
}


.philosophy-layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        .85fr;

    align-items: center;

    gap:
        clamp(
            4rem,
            9vw,
            9rem
        );
}


.philosophy-image {

    aspect-ratio:
        16 / 11;

    overflow: hidden;

    border:
        1px solid
        var(--line);
}


.philosophy-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        saturate(.72)
        contrast(1.05);

    transition:
        transform
        1.2s
        var(--ease);
}


.philosophy-image:hover img {

    transform:
        scale(1.04);
}


.philosophy-copy {

    max-width: 580px;
}


.philosophy-copy__star {

    display: block;

    margin-bottom: 2rem;

    color:
        var(--gold-light);

    font-size: 1.4rem;
}


.philosophy-copy h3 {

    margin-bottom: 1.8rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.7rem,
            5vw,
            5rem
        );

    font-weight: 400;

    line-height: .98;
}


.philosophy-copy h3 em {

    color:
        var(--gold-light);

    font-style: normal;
}


.philosophy-copy p {

    color:
        var(--grey-400);

    font-size: .73rem;

    font-weight: 300;
}



/* ================================================================
   09 — FINAL CTA
================================================================ */

.about-final {

    position: relative;

    overflow: hidden;

    padding:
        clamp(
            8rem,
            15vw,
            15rem
        )
        0;

    text-align: center;

    background:
        #050a0c;
}


.about-final__glow {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 900px;

    max-width: 95vw;

    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    background:

        radial-gradient(
            circle,
            rgba(65,99,173,.25),
            rgba(184,155,94,.065) 42%,
            transparent 69%
        );

    filter: blur(22px);
}


.about-final__inner {

    position: relative;

    z-index: 2;

    max-width: 1000px;

    margin: auto;
}


.about-final .eyebrow {

    justify-content: center;
}


.about-final h2 {

    margin:
        0
        auto
        2rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3.5rem,
            8vw,
            8rem
        );

    font-weight: 400;

    line-height: .9;
}


.about-final h2 em {

    display: block;

    color:
        var(--gold-light);

    font-style: normal;
}


.about-final__inner > p {

    max-width: 570px;

    margin:
        0
        auto;

    color:
        var(--grey-400);

    font-size: .74rem;
}


.about-final__actions {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 2rem;

    margin-top: 3rem;
}



/* ================================================================
   10 — TABLET
================================================================ */

@media (max-width: 1199px) {

    .about-hero-card {

        right: var(--container);

        width: 220px;
    }


    .identity-card {

        min-height: 370px;

        padding-left: 1.3rem;

        padding-right: 1.3rem;
    }

}



/* ================================================================
   11 — SMALL DESKTOP / TABLET
================================================================ */

@media (max-width: 991.98px) {

    .about-hero-card {

        display: none;
    }


    .about-hero__content {

        padding-left: 0;
    }


    .about-hero__title em {

        padding-left:
            clamp(
                1rem,
                8vw,
                5rem
            );
    }


    .about-hero__intro {

        margin-left:
            clamp(
                1rem,
                8vw,
                5rem
            );
    }


    .about-story__grid {

        grid-template-columns: 1fr;

        gap: 5rem;
    }


    .about-story__visual {

        width:
            min(
                85%,
                650px
            );

        margin:
            0
            auto;
    }


    .about-identity__heading {

        grid-template-columns: 1fr;

        gap: 1.5rem;
    }


    .identity-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .identity-card:nth-child(2) {

        border-right: 0;
    }


    .identity-card:nth-child(-n+2) {

        border-bottom:
            1px solid
            var(--line);
    }


    .about-location__grid {

        grid-template-columns: 1fr;

        gap: 5rem;
    }


    .about-location__visual {

        width:
            min(
                80%,
                620px
            );

        margin: auto;
    }


    .about-location__copy {

        max-width: 760px;
    }


    .philosophy-layout {

        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .philosophy-image {

        width:
            min(
                100%,
                800px
            );
    }


    .philosophy-copy {

        max-width: 750px;
    }

}



/* ================================================================
   12 — MOBILE
================================================================ */

@media (max-width: 767px) {

    .about-hero__top {

        display: block;
    }


    .about-hero__top i,
    .about-hero__top span:last-child {

        display: none;
    }


    .about-hero__title {

        font-size:
            clamp(
                4.1rem,
                20vw,
                6.8rem
            );
    }


    .about-hero__title em {

        padding-left: 1.3rem;
    }


    .about-hero__intro {

        margin-left: 1.3rem;
    }


    .about-hero__bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 1.2rem;
    }


    .about-story__visual {

        width: 100%;

        padding-left: 1.2rem;
    }


    .about-story__image {

        width: 92%;
    }


    .about-story__floating {

        min-width: 215px;
    }


    .about-story__line {

        left: 1.2rem;
    }


    .about-statement blockquote {

        font-size:
            clamp(
                2.8rem,
                13vw,
                4.7rem
            );
    }


    .identity-grid {

        grid-template-columns: 1fr;
    }


    .identity-card {

        min-height: auto;

        padding:
            2rem
            1.2rem
            3rem;

        border-right: 0;

        border-bottom:
            1px solid
            var(--line);
    }


    .identity-card:nth-child(2) {

        border-right: 0;
    }


    .identity-card:last-child {

        border-bottom: 0;
    }


    .identity-card__icon {

        margin:
            2.5rem
            0
            2rem;
    }


    .about-numbers__grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .about-number:nth-child(2) {

        border-right: 0;
    }


    .about-number:nth-child(-n+2) {

        border-bottom:
            1px solid
            var(--line-soft);
    }


    .about-location__visual {

        width: 100%;
    }


    .location-address {

        grid-template-columns: 1fr;

        gap: .8rem;
    }


    .philosophy-image {

        aspect-ratio:
            4 / 5;
    }


    .about-final__actions {

        flex-direction: column;

        gap: 1rem;
    }

}



/* ================================================================
   13 — SMALL MOBILE
================================================================ */

@media (max-width: 430px) {

    .about-numbers__grid {

        grid-template-columns: 1fr;
    }


    .about-number {

        border-right: 0;

        border-bottom:
            1px solid
            var(--line-soft);
    }


    .about-number:last-child {

        border-bottom: 0;
    }


    .about-story__floating {

        width: 76%;
    }


    .about-location__image {

        aspect-ratio:
            4 / 5.6;
    }


    .about-experience-band span {

        padding:
            1.1rem
            1.5rem;
    }

}