/*#region 기본*/
:root
{
    --top-bar-height: 112.5px;
    --tool-bar-height: 52.5px;
    --menu-width: 157.5px;
    --cream: #EADCC2;
    --black: #0B0909;
    --marquee-row-height: 229px;
    --marquee-gap: 96px;
    --marquee-duration: 240s;
    --floor-plan-scale: 112%;
    --main1-content-width: 1200px;
    --main1-content-height: 500px;
    --cursor-width: 17px;
    --cursor-height: 25px;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nanum Myeongjo", "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
}

html
{
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body
{
    min-height: 100vh;
    color: #EADCC2;
    background-color: var(--black);
    overflow-x: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
}

button,
a
{
    -webkit-tap-highlight-color: transparent;
}
/*#endregion*/

/*#region 커스텀 커서*/
.custom-cursor
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;

    width: var(--cursor-width);
    height: var(--cursor-height);

    background-image: url("media/Mouse/Subtract.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 1;
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0);
    transition: opacity 0.2s ease;
    will-change: transform, opacity;
}

.custom-cursor.is-hidden
{
    opacity: 0;
}

@media (pointer: fine)
{
    html,
    body,
    body *
    {
        cursor: none !important;
    }
}

@media (pointer: coarse)
{
    .custom-cursor
    {
        display: none;
    }
}
/*#endregion*/

/*#region 상단 바*/
.top-bar
{
    width: 100%;
    height: var(--top-bar-height);
    background-color: rgba(14, 12, 11, 0.96);
    border-bottom: 1px solid rgba(234, 220, 194, 0.08);
    backdrop-filter: blur(10px);

    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0;
    z-index: 1000;

    transition: transform 0.5s ease;
}

.top-bar.hide
{
    transform: translateY(-100%);
}

.logo
{
    height: 41.25px;
    width: 236.25px;
    display: block;
    cursor: pointer;
}

.logo img
{
    width: 236.25px;
    height: 41.25px;

    display: block;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.logo img:hover
{
    opacity: 0.86;
    transform: translateY(-1px);
}
/*#endregion*/

/*#region 툴 바*/
.tool-bar
{
    width: 100%;
    height: var(--tool-bar-height);
    background-color: rgba(14, 12, 11, 0.86);
    border-bottom: 1px solid rgba(234, 220, 194, 0.1);
    backdrop-filter: blur(8px);

    display: flex;
    justify-content: center;
    align-items: center;
    
    gap: clamp(24px, 5vw, 64px);

    position: fixed;
    top: var(--top-bar-height);
    z-index: 900;

    transition: transform 0.5s ease;
}

.tool-bar.hide
{
    transform: translateY(-220%);
}

.tool-button
{
    width: var(--menu-width);
    height: var(--tool-bar-height);
    flex: 0 0 var(--menu-width);

    background-color: transparent;
    border: none;

    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tool-button:hover,
.dropdown:hover .intro-button,
.dropdown:focus-within .intro-button
{
    opacity: 1;
    transform: translateY(-1px);
}

.tool-button:focus-visible,
.dropdown-menu button:focus-visible,
.contents a:focus-visible
{
    outline: 1px solid var(--cream);
    outline-offset: 4px;
}

/*팀 소개 페이지 이동 버튼*/
.team-button
{
    background-image: url("media/Logo/Team/PawerSmall.svg");
    background-size: auto var(--tool-bar-height);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.58;
}

/*게임 소개 페이지 이동 버튼*/
.dropdown
{
    position: relative;
    width: var(--menu-width);
    height: var(--tool-bar-height);
    flex-shrink: 0;
}

.intro-button
{
    position: relative;

    width: var(--menu-width);
    height: var(--tool-bar-height);

    font-size: 21px;
    font-weight: 700;
    color: var(--cream);
    opacity: 0.58;

    background-color: transparent;
    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* 라인은 버튼 영역 안쪽 하단에 위치 */
.intro-line
{
    position: absolute;
    left: 0;
    bottom: 0;

    width: var(--menu-width);
    height: 2.25px;

    background-color: transparent;
    transition: background-color 0.25s ease;
}

.dropdown-menu
{
    position: absolute;
    top: var(--tool-bar-height);
    left: 0;

    display: none;
    flex-direction: column;

    width: var(--menu-width);
    padding: 6px 0;
    background-color: rgba(18, 16, 15, 0.9);
    border: 1px solid rgba(234, 220, 194, 0.1);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.36);
    z-index: 800;
}

/* 버튼, 라인, 메뉴 중 어디든 hover 중이면 유지 */
.dropdown:hover .intro-line,
.dropdown:focus-within .intro-line
{
    background-color: var(--cream);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu
{
    display: flex;
}

.dropdown-menu button
{
    width: 100%;
    min-height: 34px;
    padding: 0 12px;

    background-color: transparent;
    border: none;

    color: var(--cream);
    font-size: 13.5px;
    opacity: 0.62;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.dropdown-menu button:hover
{
    opacity: 1;
    background-color: rgba(234, 220, 194, 0.08);
}

.download-button
{
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0;

    color: var(--cream);
    opacity: 0.68;
}

/*#endregion*/

/*#region 메인 첫 화면*/
.main-page
{
    min-height: 100vh;
    overflow-x: hidden;
}

.main-section
{
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;
}

.main-section::before
{
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("media/MainPage/Main1/Back1.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    z-index: 0;
}

.main-section::after
{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(11, 9, 9, 0.15), rgba(11, 9, 9, 0.46) 78%, var(--black)),
        radial-gradient(circle at 50% 46%, rgba(234, 220, 194, 0.13), transparent 32%);
    pointer-events: none;
    z-index: 1;
}

.section-content
{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(var(--top-bar-height) + var(--tool-bar-height) + 20px) 24px 80px;
}

.main-visual
{
    position: relative;
    width: min(64vw, 680px);
    transform: translateY(34px);
    z-index: 2;
}

.main1-logo
{
    display: block;
    width: 100%;
    max-height: 230px;
    height: auto;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.42));
}
/*#endregion*/

/*#region 메인 목차*/
.contents
{
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 32px;

    transform: translateY(88px);

    overflow: visible;
    z-index: 2;
}

.contents a
{
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--cream);
    opacity: 0.5;

    font-size: 21px;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    overflow: visible;
    z-index: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.contents a::before
{
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 460px;
    height: 210px;

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

    background-image: url("media/MainPage/Main1/SelectHover.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0;
    pointer-events: none;

    z-index: -1;
    transition: opacity 0.25s ease;
}

.contents a:hover,
.underbar-item:hover
{
    opacity: 1;
    transform: translateY(-2px);
}

.contents a:hover::before
{
    opacity: 1;
}

.main1-team
{
    height: 25px;
    width: auto;
    
    margin-bottom: 10px;

    display: block;
}
/*#endregion*/

/*#region 글자 배경 및 Main1 오버레이*/
.below-background
{
    position: relative;
    width: 100%;
    padding-top: 30px;
    overflow: hidden;

    background-color: var(--black);
}

.main1-content-bridge
{
    position: relative;
    top: 0;
    z-index: 3;

    width: 100%;
    height: 0;
    scroll-margin-top: calc(var(--top-bar-height) + var(--tool-bar-height) + 180px);
    pointer-events: none;
}

.main1-content-frame
{
    position: absolute;
    top: -150px;
    left: 50%;

    width: var(--main1-content-width);
    height: var(--main1-content-height);
    transform: translateX(-50%);
    pointer-events: none;
}

.main1-content-image
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main1-team-title
{
    position: absolute;
    top: 40px;
    left: 40px;

    width: auto;
    height: 150px;
    object-fit: contain;
}

.main1-tabs
{
    position: absolute;
    top: 179px;
    left: 90px;

    display: flex;
    gap: 14px;
    pointer-events: auto;
}

.main1-tab-button
{
    min-width: 96px;
    height: 32px;
    padding: 0 14px;

    background-color: transparent;
    border: 1.5px solid var(--cream);
    border-radius: 4px;
    color: var(--cream);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0.42;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.main1-tab-button.active,
.main1-tab-button:hover
{
    opacity: 1;
}

.main1-tab-button:hover
{
    transform: translateY(-1px);
}

.main1-tab-button:focus-visible,
.main2-heading-arrow:focus-visible,
.main2-card-link:focus-visible,
.underbar-item:focus-visible
{
    outline: 1px solid var(--cream);
    outline-offset: 5px;
}

.main1-tab-panels
{
    position: absolute;
    top: 245px;
    left: 0;
    right: 0;
}

.main1-tab-panel
{
    display: none;
}

.main1-tab-panel.active
{
    display: block;
}

.main1-members-list
{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
}

.main1-member-card
{
    flex: 0 0 auto;
    width: 105px;
    text-align: center;
}

.main1-member-image
{
    display: block;
    width: 105px;
    height: 105px;
    object-fit: contain;
}

.main1-member-name
{
    margin-top: 10px;
    color: var(--cream);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
}

.main1-member-role
{
    margin-top: 4px;
    color: var(--cream);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    opacity: 0.76;
    white-space: nowrap;
}

.main1-stack-list
{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    transform: translateY(10px);
}

.main1-stack-card
{
    flex: 0 0 auto;
    width: 85px;
    text-align: center;
}

.main1-stack-image
{
    display: block;
    width: 85px;
    height: 85px;
    object-fit: contain;
}

.main1-stack-name
{
    margin-top: 15px;
    color: var(--cream);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
}

.main1-arrow-stack
{
    position: absolute;
    top: 115px;
    left: 460px;

    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: pointer;
}

.main1-arrow-circle,
.main1-arrow-icon,
.main2-heading-arrow-circle,
.main2-heading-arrow-icon
{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.main1-arrow-circle,
.main2-heading-arrow-circle
{
    width: 100%;
    height: 100%;
}

.main1-arrow-icon,
.main2-heading-arrow-icon
{
    width: 37.5px;
    height: 37.5px;
    transform: translate(calc(-50% - 5px), -50%);
    transition: transform 0.25s ease;
}

.main1-arrow-stack:hover .main1-arrow-icon,
.main2-heading-arrow:hover .main2-heading-arrow-icon
{
    transform: translate(calc(-50% + 5px), -50%);
}

.marquee-row
{
    position: relative;
    z-index: 1;

    width: 100%;
    height: var(--marquee-row-height);
    overflow: hidden;

    display: flex;
    align-items: center;
}

.marquee-track
{
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee-row-top .marquee-track
{
    animation: marquee-right var(--marquee-duration) linear infinite;
}

.marquee-row-bottom .marquee-track
{
    animation: marquee-left var(--marquee-duration) linear infinite;
}

.marquee-group
{
    display: flex;
}

.marquee-group span
{
    flex: 0 0 auto;
    padding-right: var(--marquee-gap);

    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px var(--cream);
    opacity: 0.2;

    font-family: "Nanum Myeongjo", "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
    font-size: clamp(96px, 12vw, 172px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--marquee-row-height);
    white-space: nowrap;
}
/*#endregion*/

/*#region FloorPlan 배경*/
.main3-background
{
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 30px auto 0;
    overflow: hidden;
}

.main3-background::before
{
    content: "";
    display: block;
    position: relative;
    z-index: 0;

    width: var(--floor-plan-scale);
    aspect-ratio: 2259 / 1445;
    margin-left: 50%;

    background-image: url("media/MainPage/Main2/FloorPlan.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    transform: translateX(-50%);
}

.main2-info-block
{
    position: absolute;
    left: 50%;
    bottom: clamp(20px, 5.6vw, 92px);
    z-index: 1;

    width: var(--main1-content-width);
    transform: translateX(-50%);
}

.main2-section-heading
{
    margin-bottom: 25px;
    scroll-margin-top: calc(var(--top-bar-height) + var(--tool-bar-height) + 28px);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;

    color: #211812;
}

.main2-section-heading h2
{
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1;
}

.main2-heading-arrow
{
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: block;
    cursor: pointer;
}

.main2-heading-arrow-circle,
.main2-heading-arrow-icon
{
    filter: brightness(0) saturate(100%) invert(5%) sepia(0%) saturate(0%) hue-rotate(179deg) brightness(95%) contrast(92%);
}

.main2-image-row
{
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2.4vw, 30px);
}

.main2-summary-card
{
    position: relative;
    color: #211812;
    isolation: isolate;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.main2-summary-card::before
{
    content: "";
    position: absolute;
    inset: 6.4%;
    z-index: 1;

    background-color: rgba(245, 236, 214, 0.22);
    border: 1px solid rgba(35, 25, 18, 0.24);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 -18px 40px rgba(50, 36, 24, 0.08);
    pointer-events: none;
}

.main2-summary-card:hover
{
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.42));
    transform: translateY(-10px);
}

.main2-card-shell
{
    display: block;
    width: 100%;
    height: auto;
}

.main2-card-content
{
    position: absolute;
    inset: 9% 9% 10%;
    z-index: 2;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main2-video-frame,
.main2-map-preview
{
    position: relative;
    height: 42%;
    flex: 0 0 42%;

    border: 1px solid rgba(34, 24, 17, 0.38);
    background-color: rgba(26, 21, 17, 0.9);
    overflow: hidden;
}

.main2-video-frame
{
    box-shadow: inset 0 0 0 1px rgba(234, 220, 194, 0.08);
}

.main2-summary-video,
.main2-map-image
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main2-map-preview
{
    padding: 8px;
}

.main2-map-image
{
    object-fit: contain;
    background-color: rgba(12, 10, 9, 0.54);
}

.main2-card-body
{
    min-height: 0;
    padding: clamp(12px, 1.4vw, 18px) clamp(8px, 1.1vw, 14px) 0;

    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.main2-card-content-text .main2-card-body
{
    height: 100%;
    padding: clamp(24px, 3vw, 34px) clamp(13px, 1.7vw, 20px) 0;
}

.main2-card-kicker
{
    width: max-content;
    margin-bottom: 9px;
    padding: 5px 8px 4px;

    color: #F0E1C7;
    background-color: rgba(31, 24, 18, 0.9);
    border: 1px solid rgba(33, 24, 18, 0.34);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.main2-card-body h2
{
    color: #211812;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
}

.main2-card-body p
{
    margin-top: clamp(8px, 1.1vw, 14px);

    color: rgba(33, 24, 18, 0.84);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.58;
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.main2-card-content-text .main2-card-body p
{
    display: block;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.72;
    -webkit-line-clamp: unset;
}

.main2-info-list
{
    margin: 18px 0 0;
    padding: 0;
    list-style: none;

    display: grid;
    gap: 8px;

    color: rgba(33, 24, 18, 0.86);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.main2-info-list li
{
    padding-left: 10px;
    border-left: 2px solid rgba(33, 24, 18, 0.36);
}

.main2-card-link
{
    width: max-content;
    margin-top: auto;
    padding-top: clamp(10px, 1.2vw, 16px);

    color: #211812;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.main2-card-link::after
{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 8px;
    background-color: currentColor;
    transform: scaleX(0.36);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.main2-card-link:hover::after,
.main2-card-link:focus-visible::after
{
    transform: scaleX(1);
}

@media (max-width: 980px)
{
    .main3-background
    {
        overflow: visible;
    }

    .main3-background::before
    {
        width: 180%;
    }

    .main2-info-block
    {
        position: relative;
        left: auto;
        bottom: auto;
        width: min(560px, calc(100% - 40px));
        max-width: 560px;
        margin: -38vw auto 80px;
        transform: none;
    }

    .main2-section-heading
    {
        margin-bottom: 25px;
    }

    .main2-section-heading h2
    {
        font-size: 34px;
    }

    .main2-image-row
    {
        grid-template-columns: 1fr;
    }

    .main2-video-frame,
    .main2-map-preview
    {
        height: 41%;
        aspect-ratio: auto;
    }
}

@media (max-width: 420px)
{
    .main2-card-content
    {
        inset: 8% 8% 10%;
    }

    .main2-video-frame,
    .main2-map-preview
    {
        height: 35%;
        flex-basis: 35%;
    }

    .main2-card-body
    {
        padding: 10px 6px 0;
    }

    .main2-card-content-text .main2-card-body
    {
        padding: 18px 10px 0;
    }

    .main2-card-kicker
    {
        margin-bottom: 7px;
        padding: 4px 6px 3px;
        font-size: 10px;
    }

    .main2-card-body h2
    {
        font-size: 18px;
    }

    .main2-card-body p
    {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.45;
    }

    .main2-info-list
    {
        margin-top: 12px;
        gap: 6px;
        font-size: 11px;
    }

    .main2-card-link
    {
        padding-top: 10px;
        font-size: 11px;
    }
}
/*#endregion*/

/*#region UnderBar*/
.under-bar
{
    width: 100%;
    min-height: 150px;
    padding: 32px 24px 22px;

    background-color: var(--black);
    border-top: 1px solid rgba(234, 220, 194, 0.1);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.underbar-links
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.underbar-item
{
    width: 36px;
    height: 36px;
    padding: 0;

    background-color: transparent;
    border: none;
    cursor: pointer;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    opacity: 0.72;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.underbar-item img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.underbar-copy
{
    color: var(--cream);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0.52;
}
/*#endregion*/

/*#region 애니메이션*/
@keyframes marquee-left
{
    from
    {
        transform: translateX(0);
    }

    to
    {
        transform: translateX(-50%);
    }
}

@keyframes marquee-right
{
    from
    {
        transform: translateX(-50%);
    }

    to
    {
        transform: translateX(0);
    }
}
/*#endregion*/

/*#region 반응형*/
@media (max-width: 720px)
{
    :root
    {
        --marquee-gap: 56px;

        --top-bar-height: 82px;
        --tool-bar-height: 48px;
        --menu-width: 118px;
    }

    .logo,
    .logo img
    {
        width: 190px;
        height: auto;
    }

    .tool-bar
    {
        gap: 8px;
        padding: 0 12px;
    }

    .tool-button
    {
        font-size: 15px;
    }

    .team-button
    {
        background-size: auto 42px;
    }

    .dropdown-menu button
    {
        font-size: 12px;
    }

    .section-content
    {
        padding-inline: 18px;
    }

    .main-visual
    {
        width: min(82vw, 430px);
        transform: translateY(18px);
    }

    .contents
    {
        gap: 26px;
        transform: translateY(72px);
    }

    .contents a
    {
        font-size: 18px;
    }

    .contents a::before
    {
        width: 320px;
        height: 150px;
    }

    .main1-team
    {
        height: 21px;
    }

    .marquee-group span
    {
        font-size: clamp(72px, 22vw, 104px);
        -webkit-text-stroke-width: 1px;
    }

    .under-bar
    {
        min-height: 132px;
        padding: 26px 20px 18px;
        gap: 25px;
    }

    .underbar-links
    {
        gap: 25px;
    }

    .underbar-item
    {
        width: 30px;
        height: 30px;
    }

    .underbar-copy
    {
        font-size: 11.5px;
    }
}
/*#endregion*/