/*
[POSH 홈 전용 스타일 전체 파일 구조]
public/home/home.css            - 홈 전용 스타일
page/site/home/home_view.php    - 홈 화면에서 사용
*/

.home-hero { position: relative; background: #dfe7ec; }
.home-hero__media img { width: 100%; aspect-ratio: 1600 / 720; object-fit: cover; }
.home-hero__dots {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
}
.home-hero__dots span { width: 10px; height: 10px; border-radius: 999px; background: rgba(0,0,0,0.18); }
.home-hero__dots .is-active { background: rgba(0,0,0,0.55); }

.home-overview { background: #f1f1f1; }
.home-overview__intro h1 {
    margin: 0; font-size: 64px; line-height: 1.04; font-weight: 900; letter-spacing: -0.03em;
}
.home-overview__intro p {
    max-width: 760px; margin: 18px 0 0; font-size: 22px; line-height: 1.6; color: #3d3d3d;
}
.home-overview__stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 34px;
}
.stat-card { padding: 8px 0; }
.stat-card__value {
    display: block; color: var(--posh-accent); font-size: clamp(42px, 5vw, 76px); font-weight: 900; line-height: 1;
}
.stat-card__label { display: block; margin-top: 10px; font-size: 21px; color: #5a5a5a; }

.business-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
/* 2026-04-01 T1428 as-is 보존
.business-card {
    background: transparent; overflow: hidden;
}
.business-card--wide { grid-column: 1 / -1; }
.business-card__image-wrap { overflow: hidden; }
.business-card__image-wrap img {
    width: 100%; aspect-ratio: 370 / 220; object-fit: cover;
}
.business-card--wide .business-card__image-wrap img { aspect-ratio: 1160 / 520; }
.business-card__meta {
    display: flex; align-items: flex-start; gap: 14px; padding-top: 10px;
}
.business-card__icon-box {
    flex-shrink: 0; display: inline-flex; width: 44px; height: 44px; border-radius: 0;
    align-items: center; justify-content: center; background: #d7921c;
}
.business-card__icon-box img { width: 24px; height: 24px; object-fit: contain; }
.business-card__meta h3 { margin: 0; font-size: 20px; font-weight: 800; }
.business-card__meta p { margin: 8px 0 0; font-size: 16px; color: #5f5f5f; }
*/
.business-card {
    background: transparent;
    overflow: visible;
}
.business-card--wide { grid-column: 1 / -1; }
.business-card__image-wrap {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.business-card__image-wrap img {
    width: 100%;
    aspect-ratio: 370 / 220;
    object-fit: cover;
}
.business-card--wide .business-card__image-wrap img { aspect-ratio: 1160 / 520; }
.business-card__meta {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin-top: -22px;
    padding: 0 18px 0 0;
}
.business-card__icon-box {
    flex-shrink: 0;
    display: inline-flex;
    width: 46px;
    height: 46px;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    background: var(--posh-accent);
    box-shadow: 0 0 0 4px #f1f1f1;
}
.business-card__icon-box img { width: 24px; height: 24px; object-fit: contain; }
.business-card__copy {
    flex: 1 1 auto;
    min-width: 0;
    background: #f1f1f1;
    padding: 16px 18px 14px 0;
}
.business-card__meta h3 {
    margin: 0;
    color: #101010;
}
.business-card__meta p {
    display: none;
}


/* 2026-04-01 T1430 조정
- 아이콘 주황 박스의 흰색 테두리 제거
- 제목/흰색 카피 박스는 원래 자리 유지
- 아이콘만 이미지 하단 경계에 살짝 걸치도록 재조정
*/
.business-card__meta {
    align-items: flex-start;
    margin-top: 0;
    gap: 18px;
    padding: 0 18px 0 0;
}
.business-card__icon-box {
    position: relative;
    z-index: 2;
    margin-top: -22px;
    box-shadow: none;
    border: 0;
    margin-left: 14px;
}
.business-card__copy {
    background: #f1f1f1;
    padding: 16px 18px 14px 0;
}

.news-stage {
    position: relative; padding-top: 34px; min-height: 440px;
}
.news-stage__backdrop {
    position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: #343434;
}
/* 2026-04-01 T1548 조정
- 뉴스 카드 2개를 오른쪽 기준으로 재정렬
- 카드 사이 간격과 오른쪽 끝 여백을 동일하게 36px로 조정
- 두 이미지 상단 높이를 맞추고 흰색 테두리를 유지
*/
.news-stage__items {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 36px;
    padding-right: 36px;
}
.news-card:first-child {
    margin-top: 0;
}
.news-card img {
    display: block;
    height: 240px;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: var(--posh-shadow);
}
.news-card:first-child img { width: min(100%, 356px); }
.news-card:last-child img { width: min(100%, 230px); }

.investor-placeholder {
    min-height: 260px; background: transparent;
}


@media (hover: hover) and (pointer: fine) {
    .primary-nav__item.has-children:hover .submenu-panel,
    .primary-nav__item.has-children:focus-within .submenu-panel {
        display: block;
    }
}

@media (max-width: 1100px) {
    .submenu-panel__inner { grid-template-columns: 1fr; }
    .submenu-panel__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .section-head h2 { font-size: 42px; }
    .home-overview__intro h1 { font-size: 52px; }
}

@media (max-width: 860px) {
    .site-header__top-inner { min-height: 58px; }
    .site-brand__symbol { width: 46px; height: 46px; }
    .site-brand__wordmark { width: 150px; }
    .mobile-nav-toggle { display: inline-flex; }
    .site-header__nav-inner {
        display: flex; align-items: center; justify-content: flex-end; min-height: 52px;
    }
    .primary-nav {
        position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--posh-black);
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .primary-nav.is-open { display: block; }
    .primary-nav__list { display: block; }
    .primary-nav__link, .primary-nav__button {
        width: 100%; justify-content: flex-start; min-height: 54px; padding: 0 20px;
    }
    .submenu-panel {
        position: static; display: none; background: #151515; box-shadow: none; border-top: 0;
    }
    .primary-nav.is-submenu-open .submenu-panel--global { display: block; }
    .submenu-panel__inner { padding: 12px 20px 20px; }
    .submenu-panel__title-wrap { display: none; }
    .submenu-panel__groups { grid-template-columns: 1fr; gap: 18px; }
    .submenu-group { padding: 0; border: 0; border-radius: 0; background: transparent; }
    .submenu-group + .submenu-group { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; }
    .submenu-group__title { margin-bottom: 10px; color: var(--posh-white); font-size: 16px; }
    .submenu-group__link, .submenu-group__link--button {
        justify-content: flex-start; min-height: 0; background: transparent; color: var(--posh-white); border: 0; padding: 10px 0;
    }
    .submenu-group__icon img { filter: brightness(0) invert(1); opacity: 0.96; }
    .submenu-group__item.is-disabled .submenu-group__icon img { opacity: 0.45; }
    .section-head, .section-head--stacked { align-items: flex-start; }
    .home-overview__stats { grid-template-columns: 1fr; gap: 16px; }
    .business-grid { grid-template-columns: 1fr; }
    .news-stage { min-height: 0; }
    .news-stage__backdrop { height: auto; inset: 120px 0 0; }
    .news-stage__items {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        padding-right: 0;
    }
    .news-card:first-child { margin-top: 0; }
    .news-card img {
        width: min(100%, 356px);
        height: auto;
    }
    .news-card:last-child img { width: min(100%, 320px); }
    .business-card__meta {
        margin-top: -18px;
        gap: 14px;
        padding-right: 0;
    }
    .business-card__copy {
        padding: 14px 14px 12px 0;
    }
    .news-stage { min-height: 0; }
    .news-stage__backdrop { height: auto; inset: 120px 0 0; }
    .news-stage__items { flex-direction: column; align-items: center; }
    .news-card:last-child img { width: min(100%, 320px); }
    .site-footer__top, .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .site-shell { width: min(calc(100% - 28px), var(--posh-shell)); }
    .site-brand__wordmark { width: 132px; }
    .site-utility { gap: 10px; }
    .site-utility__item span { font-size: 13px; }
    .section-head h2 { font-size: 32px; }
    .section-head p { font-size: 16px; }
    .home-overview__intro h1 { font-size: 36px; }
    .home-overview__intro p { font-size: 16px; }
    .stat-card__label { font-size: 16px; }
    .business-card__meta {
        margin-top: -16px;
        gap: 12px;
    }
    .business-card__icon-box {
        width: 42px;
        height: 42px;
        box-shadow: 0 0 0 3px #f1f1f1;
        margin-left: 10px;
    }
    .business-card__copy {
        padding: 12px 12px 10px 0;
    }
    .business-card__meta h3 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
}


/* 2026-04-01 T1430 반응형 재조정
- 제목 영역은 위로 끌어올리지 않고 유지
- 아이콘만 화면 크기에 따라 걸침 정도만 축소
*/
@media (max-width: 860px) {
    .business-card__meta {
        margin-top: 0;
        gap: 14px;
        padding-right: 0;
    }
    .business-card__icon-box {
        margin-top: -18px;
        margin-left: 12px;
    }
}

@media (max-width: 560px) {
    .business-card__meta {
        margin-top: 0;
        gap: 12px;
    }
    .business-card__icon-box {
        width: 42px;
        height: 42px;
        margin-top: -16px;
        margin-left: 10px;
        box-shadow: none;
        border: 0;
    }
}

/* 2026-04-01 T1608 조정
- 사업영역 아이콘 크기 확대
- 사업영역 제목을 아이콘 아래로 재배치
- 뉴스 왼쪽 이미지는 더 크게, 오른쪽 이미지는 더 작게 조정
*/
.business-card__meta {
    display: block;
    margin-top: 0;
    gap: 0;
    padding: 0;
}
.business-card__icon-box {
    width: 56px;
    height: 56px;
    margin-top: -24px;
    margin-left: 14px;
    box-shadow: none;
    border: 0;
}
.business-card__icon-box img {
    width: 30px;
    height: 30px;
}
.business-card__copy {
    background: transparent;
    padding: 12px 14px 0 14px;
}

.news-card:first-child img {
    width: min(100%, 420px);
    height: 300px;
}
.news-card:last-child img {
    width: min(100%, 200px);
    height: 220px;
}

@media (max-width: 860px) {
    .business-card__meta {
        display: block;
        margin-top: 0;
        gap: 0;
        padding-right: 0;
    }
    .business-card__icon-box {
        width: 52px;
        height: 52px;
        margin-top: -20px;
        margin-left: 12px;
    }
    .business-card__icon-box img {
        width: 28px;
        height: 28px;
    }
    .business-card__copy {
        padding: 12px 12px 0 12px;
    }
    .news-card:first-child img {
        width: min(100%, 380px);
        height: auto;
    }
    .news-card:last-child img {
        width: min(100%, 260px);
        height: auto;
    }
}

@media (max-width: 560px) {
    .business-card__meta {
        display: block;
        margin-top: 0;
        gap: 0;
    }
    .business-card__icon-box {
        width: 48px;
        height: 48px;
        margin-top: -18px;
        margin-left: 10px;
        box-shadow: none;
        border: 0;
    }
    .business-card__icon-box img {
        width: 26px;
        height: 26px;
    }
    .business-card__copy {
        padding: 10px 10px 0 10px;
    }
    .news-card:first-child img {
        width: min(100%, 320px);
        height: auto;
    }
    .news-card:last-child img {
        width: min(100%, 220px);
        height: auto;
    }
}

/* 2026-04-01 T1638 최종 조정
- 사업영역 아이콘 크기 확대
- 사업영역 제목을 아이콘 아래로 다시 고정
- 뉴스 왼쪽 이미지는 더 크게, 오른쪽 이미지는 더 작게 조정
*/
.business-card__meta {
    display: block;
    margin-top: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
}
.business-card__icon-box {
    width: 64px;
    height: 64px;
    margin-top: -28px !important;
    margin-left: 14px !important;
    box-shadow: none !important;
    border: 0 !important;
}
.business-card__icon-box img {
    width: 34px;
    height: 34px;
}
.business-card__copy {
    display: block;
    background: transparent !important;
    padding: 14px 0 0 14px !important;
}

.news-stage__items {
    justify-content: flex-end;
    align-items: flex-start;
    gap: 28px;
    padding-right: 28px;
}
.news-card:first-child {
    margin-top: 0 !important;
}
.news-card:first-child img {
    width: min(100%, 460px);
    height: 320px;
    object-fit: cover;
}
.news-card:last-child img {
    width: min(100%, 190px);
    height: 220px;
    object-fit: cover;
}

@media (max-width: 860px) {
    .business-card__meta {
        display: block;
        margin-top: 0 !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .business-card__icon-box {
        width: 58px;
        height: 58px;
        margin-top: -24px !important;
        margin-left: 12px !important;
    }
    .business-card__icon-box img {
        width: 31px;
        height: 31px;
    }
    .business-card__copy {
        padding: 12px 0 0 12px !important;
    }
    .news-card:first-child img {
        width: min(100%, 380px);
        height: auto;
    }
    .news-card:last-child img {
        width: min(100%, 220px);
        height: auto;
    }
}

@media (max-width: 560px) {
    .business-card__icon-box {
        width: 52px;
        height: 52px;
        margin-top: -20px !important;
        margin-left: 10px !important;
    }
    .business-card__icon-box img {
        width: 28px;
        height: 28px;
    }
    .business-card__copy {
        padding: 10px 0 0 10px !important;
    }
    .news-card:first-child img {
        width: min(100%, 320px);
        height: auto;
    }
    .news-card:last-child img {
        width: min(100%, 200px);
        height: auto;
    }
}


/* 2026-04-01 T0948 HERO 슬라이드 이동형
- 현재 기준파일에서 hero 전환 방식을 페이드형이 아니라 가로 슬라이드형으로 변경
- 오른쪽에서 왼쪽으로 넘어가도록 슬라이드 트랙 구조 기준으로 정리
- 이후 JS에서는 --home-hero-current-index 값만 바꾸면 추가 CSS 수정 없이 계속 확장 가능
*/
.home-hero {
    position: relative;
    overflow: hidden;
    background: #dfe7ec;
}
.home-hero__media {
    position: relative;
    overflow: hidden;
}
.home-hero__slides {
    --home-hero-current-index: 0;
    display: flex;
    width: 100%;
    transform: translate3d(calc(var(--home-hero-current-index) * -100%), 0, 0);
    transition: transform 0.85s ease;
    will-change: transform;
}
.home-hero__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1600 / 720;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}
.home-hero__slide.is-active {
    pointer-events: auto;
}
.home-hero__media img,
.home-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-hero__dots {
    z-index: 3;
    gap: 10px;
}
.home-hero__dots span,
.home-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
}
.home-hero__dot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.home-hero__dots .is-active,
.home-hero__dot.is-active {
    background: rgba(0,0,0,0.55);
}
.home-hero__dot:focus-visible {
    outline: 2px solid rgba(255,255,255,0.92);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .home-hero__dots {
        bottom: 10px;
        gap: 8px;
    }
    .home-hero__dots span,
    .home-hero__dot {
        width: 9px;
        height: 9px;
    }
}

/* 2026-04-06 T0926 데스크탑 HERO 최대 가로폭 고정
- 사용자 요청: 데스크탑에서 메인 상단 이미지가 브라우저 폭을 따라 계속 커지지 않도록 최대 가로폭을 고정
- as-is 보존: 기존 .home-hero / .home-hero__media / .home-hero__slide 규칙은 위에 그대로 두고, 아래에서 데스크탑 전용으로만 덮어씁니다.
- to-be: 861px 이상에서는 HERO 미디어 박스를 1600px 최대폭으로 중앙 정렬하고, 모바일은 기존 유동형을 유지합니다.
*/
@media (min-width: 861px) {
    .home-hero {
        overflow: visible;
    }

    .home-hero__media {
        width: min(100%, 1600px);
        max-width: 1600px;
        margin: 0 auto;
    }

    .home-hero__slides {
        width: 100%;
    }

    .home-hero__slide {
        width: 100%;
    }
}

/*
20260514 T1512
- [POSH 모바일 홈 확정 기준]
- 모바일 홈은 흰색 상단 헤더 아래에서 히어로 이미지, 3개 지표 카드, 사업영역 리스트 카드 순서로 고정합니다.
- 데스크톱 3열 사업영역을 단순 축소하지 않고, 모바일에서는 이미지 좌측 + 텍스트 우측 카드형으로 보이게 합니다.
- 검은 상단 박스/작아져 보이지 않는 사업영역 카드/과한 아이콘 장식은 금지합니다.
*/
.home-hero__copy {
    display: none;
}

@media (max-width: 767px) {
    main {
        background: #ffffff;
    }

    .home-hero {
        background: #ffffff;
        overflow: hidden;
    }

    .home-hero__slide {
        aspect-ratio: 390 / 310;
        min-height: 310px;
    }

    .home-hero__slide::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.30) 48%, rgba(0, 0, 0, 0.08) 100%);
        pointer-events: none;
    }

    .home-hero__copy {
        position: absolute;
        z-index: 4;
        left: 24px;
        right: 24px;
        top: 50%;
        display: block;
        transform: translateY(-43%);
        color: #ffffff;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
        pointer-events: none;
    }

    .home-hero__copy h1 {
        margin: 0;
        max-width: 300px;
        font-size: 34px;
        line-height: 1.12;
        font-weight: 760;
        letter-spacing: -0.055em;
        word-break: keep-all;
    }

    .home-hero__copy p {
        margin: 14px 0 0;
        max-width: 300px;
        font-size: 16px;
        line-height: 1.62;
        font-weight: 500;
        letter-spacing: -0.035em;
        word-break: keep-all;
    }

    .home-hero__dots {
        bottom: 18px;
        gap: 8px;
    }

    .home-hero__dot {
        width: 8px !important;
        height: 8px !important;
        background: rgba(255, 255, 255, 0.52) !important;
    }

    .home-hero__dot.is-active {
        width: 22px !important;
        background: #ffffff !important;
    }

    .home-overview {
        margin-top: 0;
        padding: 18px 0 24px;
        background: #ffffff !important;
    }

    .home-overview__intro {
        display: none;
    }

    .home-overview__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
    }

    .stat-card {
        display: flex;
        min-height: 112px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px 6px 15px;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
        text-align: center;
    }

    .stat-card__value {
        color: #0b4cff !important;
        font-size: 27px !important;
        line-height: 1 !important;
        font-weight: 760 !important;
        letter-spacing: -0.045em !important;
    }

    .stat-card__label {
        margin-top: 10px;
        color: #1f2937;
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
        letter-spacing: -0.04em !important;
        word-break: keep-all;
    }

    .home-business {
        padding-top: 18px;
        background: #ffffff;
    }

    .home-business .section-head {
        margin-bottom: 14px;
        align-items: center;
    }

    .home-business .section-head h2 {
        position: relative;
        padding-left: 12px;
        color: #111111;
        font-size: 24px !important;
        line-height: 1.15 !important;
        font-weight: 760 !important;
        letter-spacing: -0.045em !important;
    }

    .home-business .section-head h2::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        width: 4px;
        border-radius: 999px;
        background: #205bff;
    }

    .section-head__more {
        color: #0b4cff;
        font-size: 14px;
        line-height: 1;
        font-weight: 650;
    }

    .business-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .business-card,
    .business-card--wide {
        display: grid;
        grid-template-columns: minmax(0, 44%) minmax(0, 56%);
        min-height: 118px;
        overflow: hidden;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    }

    .business-card__image-wrap {
        height: 100%;
        min-height: 118px;
        overflow: hidden;
    }

    .business-card__image-wrap a,
    .business-card__image-wrap img,
    .business-card--wide .business-card__image-wrap img {
        width: 100%;
        height: 100%;
        min-height: 118px;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .business-card__meta {
        position: relative;
        display: flex !important;
        height: 100%;
        min-height: 118px;
        align-items: center;
        margin: 0 !important;
        padding: 16px 34px 16px 16px !important;
        background: #ffffff !important;
    }

    .business-card__meta::after {
        content: '›';
        position: absolute;
        top: 50%;
        right: 15px;
        color: #111111;
        font-size: 25px;
        line-height: 1;
        font-weight: 300;
        transform: translateY(-50%);
    }

    .business-card__icon-box {
        display: none !important;
    }

    .business-card__copy {
        display: block;
        padding: 0 !important;
        background: transparent !important;
    }

    .business-card__meta h3 {
        margin: 0;
        color: #111111;
        font-size: 18px !important;
        line-height: 1.25 !important;
        font-weight: 720 !important;
        letter-spacing: -0.045em !important;
        word-break: keep-all;
    }

    .business-card__meta p {
        display: none;
    }

    .home-news,
    .home-investor {
        display: none;
    }
}

@media (max-width: 390px) {
    .home-hero__copy h1 {
        font-size: 31px;
    }

    .home-hero__copy p {
        font-size: 15px;
    }

    .stat-card__value {
        font-size: 24px !important;
    }

    .stat-card__label {
        font-size: 11px !important;
    }

    .business-card__meta h3 {
        font-size: 16px !important;
    }
}

/* 2026-05-15 T1758 뉴스 영역 최종 위치 보정
- 오른쪽 작은 뉴스 이미지가 우측 끝에 붙어 보이는 문제를 CSS 기준으로 보정합니다.
- as-is: home_view.php 인라인 style에서 display/gap/padding/transform을 직접 제어했습니다.
- to-be: 뉴스 이미지 묶음의 위치·간격·크기를 home.css에서 일괄 제어합니다.
- 기존 뉴스 이미지 파일명과 호출 경로는 변경하지 않습니다.
*/
.home-news .news-stage__items {
    position: relative;
    z-index: 1;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 128px !important;
    transform: none !important;
}

.home-news .news-card {
    margin: 0 !important;
    flex: 0 0 auto;
}

.home-news .news-card:first-child img {
    display: block;
    width: 540px !important;
    max-width: 100% !important;
    height: 360px !important;
    object-fit: cover !important;
    border: 3px solid #ffffff !important;
}

.home-news .news-card:last-child img {
    display: block;
    width: 200px !important;
    height: 220px !important;
    object-fit: cover !important;
    border: 3px solid #ffffff !important;
}

@media (max-width: 1100px) {
    .home-news .news-stage__items {
        padding-right: 72px !important;
        gap: 20px !important;
    }

    .home-news .news-card:first-child img {
        width: 500px !important;
        height: 334px !important;
    }

    .home-news .news-card:last-child img {
        width: 180px !important;
        height: 208px !important;
    }
}

@media (max-width: 860px) {
    .home-news .news-stage__items {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 18px !important;
        padding-right: 0 !important;
    }

    .home-news .news-card:first-child img,
    .home-news .news-card:last-child img {
        width: min(100%, 320px) !important;
        height: auto !important;
    }
}