@layer pages {
    .index_swiperbigcontainer {
        height: 780px;
        display: grid;
        grid-template-areas: 'stack';
        grid-template-rows: 100%;
        grid-template-columns: 100%;
    }

    .index_swiperbigcontainer .mobile_img {
        display: none;
    }

    .bg_indexswiper,
    .indexswiper2 {
        width: 100%;
        height: 100%;
    }

    .bg_indexswiper {
        grid-area: stack;
        z-index: 20;
    }

    .indexswiper2 {
        z-index: 600;
        grid-area: stack;
    }

    .overlap_graphic {
        pointer-events: none;
        grid-area: stack;
        align-self: flex-end;
        width: 100%;
        aspect-ratio: 6.582;
        z-index: 110;
        /*display: grid;
        grid-template-areas: 'overlap_graph';*/
        background: var(--grey_100);
        opacity: .5;
        clip-path: shape(from 0% 19.71%, line to 29.13% 6.14%, line by 48.14% 26.77%, line to 100% 0%, vline by 100%, hline to 0%, vline to 19.71%, close);
    }

    .overlap_graphic::before {
        content: '';
        /*position: absolute;
        left: 0;
        bottom: 0;*/
        /*width: 100%;
        height: 100%;
        background-image: url('../images/color-overlap-1.svg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        display: block;
        grid-area: overlap_graph;
        z-index: 10;*/
    }

    .overlap_graphic::after {
        content: '';
        /*width: 100%;
        height: 65%;
        /*background-image: url('../images/color-overlap-2.svg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        display: block;
        grid-area: overlap_graph;
        z-index: 100;
        align-self: flex-end;
        /*filter: var(--grey_100_filter);*/
    }

    .overlap_graphic>* {
        /*--overlap_buffer_height: 1rem;
        content: '';
        display: block;
        width: 100%;
        height: var(--overlap_buffer_height);
        background-color: var(--grey_100);
        grid-area: overlap_graph;
        z-index: 10;
        align-self: flex-end;
        margin-bottom: calc(var(--overlap_buffer_height) * -1);*/
    }

    .swiperbigcontainer:has(.bg_indexswiper) .swiper_nav {
        /*position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 6rem;*/
        grid-area: stack;
        z-index: 1300;
        align-self: flex-end;
        margin-top: 0;
        padding-bottom: 7rem;
    }

    .bg_indexswiper .slide_inner {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-areas: 'overlap1';
        grid-template-rows: 100%;
        grid-template-columns: 100%;
    }

    .bg_indexswiper .slide_inner :where(.desktop_img, .mobile_img) {
        width: 100%;
        height: 100%;
        object-fit: cover;
        grid-area: overlap1;
        z-index: 50;
    }

    .bg_indexswiper .slide_inner:before {
        content: "";
        width: 100%;
        height: 80%;
        background: linear-gradient(180deg, rgba(55, 65, 85, 0.7), rgba(55, 61, 75, 0));
        opacity: .8;
        grid-area: overlap1;
        z-index: 150;
    }

    /* .bg_indexswiper .slide_inner:not(.remove_filter)::before {
        background: linear-gradient(180deg, rgba(55, 65, 85, 0.7), rgba(55, 61, 75, 0));
    } */



    .indexswiper2 .slide_title {
        font-size: 4.75rem;
        font-weight: 900;
        line-height: 1.2;
        color: #fff;
        margin-bottom: max(4vw, 1.5rem);
    }

    .indexswiper2 .slide_inner {
        /*overlap graphic after element height = 190.45px = 9.919vw*/
        height: calc(100% - 9.919vw);

        display: flex;
        align-items: flex-end;
        padding-bottom: 3rem;
    }

    .indexswiper2 .slide_inner:has(.slide_title) {
        align-items: center;
        padding-bottom: 0;
    }

    .index_swiperbigcontainer .prev_next_wrap {
        z-index: 1200;
        height: calc(100% - 9.919vw);
        display: flex;
        align-items: center;
        grid-area: stack;
        pointer-events: none;
    }

    .index_swiperbigcontainer :where(.swiper-button-prev, .swiper-button-next) {
        width: 3rem;
        height: 6rem;
        background-color: rgba(233, 236, 239, 0.47);
        pointer-events: all;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .index_swiperbigcontainer .swiper-button-next::before {
        margin-left: .25rem;
    }

    .index_swiperbigcontainer :where(.swiper-button-prev, .swiper-button-next)::before {
        width: 40%;
        height: 40%;
        filter: var(--tsunami_500_filter);
    }

    .index_swiperbigcontainer .swiper-button-prev {
        left: 0;
        top: auto;
    }

    .index_swiperbigcontainer .swiper-button-next {
        right: 0;
        top: auto;

    }
}

@layer pages {
    .main_area2 {
        position: relative;
        z-index: 999;
        --overlap_graphic_asp_ratio: 8.807;
        margin-top: calc(100% / var(--overlap_graphic_asp_ratio) * -1);
    }

    .main_area2::before {
        content: '';
        display: block;
        pointer-events: none;
        width: 100%;


        clip-path: shape(from 0% 95.87%, line by 100% 4.13%, vline by -73.44%, line by -27.2% 61.42%, line to 0% 0%, vline to 95.87%, close);


        aspect-ratio: var(--overlap_graphic_asp_ratio);
        background: var(--grey_100);

    }

    .main_area :where(h2, .h2, .h2_style) {
        margin-bottom: 2rem;
    }

    .main_area2 .main_area_inner {
        background: var(--grey_100);
        padding-bottom: 2rem;
        margin-top: -.7rem;
    }

    .main_area2::after {
        content: '';
        display: block;
        width: 100%;
        aspect-ratio: 1920 / 187;
        /*background-image: url('../images/color-overlap-our-work.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;*/
        background: var(--grey_100);
        clip-path: shape(from 25.61% 100%, hline by 0%, line to 0% 32.94%, vline to 0%, hline by 100%, vline to 2.13%, line to 25.61% 100%, close);
    }

    .main_area2 .icon_ball {
        /*margin-top for spacing after hover as swiper-slide must be overflow hidden will crop the ball*/
        margin-left: .5rem;
        margin-right: .5rem;
        margin-top: 1rem;
        margin-bottom: .625rem;
    }

}

@layer pages {
    .swiper3 .swiper-slide {
        page-break-inside: avoid;
    }
}

@layer pages {
    .main_area3 {
        padding-top: 3rem;
        position: relative;
        z-index: 500;
    }

    .main_area3 .container_inner {
        display: flex;
        column-gap: 1.5rem;
    }

    .main_area3 .container_inner>*:nth-child(1) {
        width: 20%;
    }

    .main_area3 .container_inner>*:nth-child(2) {
        width: 80%;
    }

    .main_area3 .swiper-slide {
        page-break-inside: avoid;
    }

    .main_area3 .swiper-slide .slide_inner {
        --inner_spacing: 4px;
        width: calc(100% - var(--inner_spacing) * 2);
        height: calc(100% - var(--inner_spacing) * 2);
        margin-left: auto;
        margin-right: auto;
        margin-top: var(--inner_spacing);
    }
}

@layer pages {
    .main_area4 {
        position: relative;
        z-index: 50;
    }

    .main_area4 .container {}

    .main_area4 .top_side {
        position: relative;
        z-index: 1000;
    }

    .main_area4 .top_side .container {
        position: relative;
        z-index: 899;
    }

    .main_area4 .top_side::after {
        content: '';
        display: block;
        width: 100%;
        height: calc(100% - 9.95vw);
        background: var(--grey_100);
        position: absolute;
        left: 0;
        top: 9.95vw;
    }

    .main_area4 .overlap_img {

        width: 100%;
        /*display: grid;
        grid-template-areas: 'overlap2';*/
        background: var(--grey_100);

        aspect-ratio: 9.6;
        clip-path: shape(from 0% 100%, vline to 0%, line by 72.8% 93.2%, line to 100% 28.15%, vline by 71.85%, hline to 0%, close);

    }

    .main_area4 .overlap_img::before {
        content: '';
        /*background-image: url('../images/color-overlap-event-calender.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center bottom;
        width: 100%;
        height: 100%;
        display: block;
        grid-area: overlap2;
        z-index: 50;*/
    }

    .main_area4 .overlap_img::after {
        --overlap_buffer_height: 1rem;
        /*content: '';
        display: block;
        width: 100%;
        height: var(--overlap_buffer_height);
        background-color: var(--grey_100);
        grid-area: overlap2;
        z-index: 10;
        align-self: flex-end;
        margin-bottom: calc(var(--overlap_buffer_height) * -1);*/
    }

    .main_area4 .flag {
        z-index: 100;
        display: grid;
        grid-template-areas: 'stack3';
        margin-top: -15vw;
    }

    .main_area4 .flag h2 {
        margin-bottom: 0;
        grid-area: stack3;
        padding-top: 11rem;
        z-index: 90;
    }

    .main_area4 .flag:before {
        content: '';
        width: 18rem;
        aspect-ratio: 777 / 888;
        display: block;
        background-image: url(../images/banner-icon.svg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        grid-area: stack3;
        margin-left: -3rem;
        opacity: .58;
    }

    .main_area4 .container_inner {
        z-index: 300;


        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: max(5rem, 5vw);
    }

    .main_area4 .main_area_inner {
        background: var(--grey_100);
        padding-top: 3rem;
        padding-bottom: 5rem;
        position: relative;
        z-index: 4000;
        margin-top: -2px;
    }



}

@layer components {
    .events_container {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: .625rem;
        padding: 3rem 2rem;
    }

    .events_container .inner {
        overflow-y: auto;

    }

    .event_wrap {
        --small_circle_mar_top: -.25rem;
        --small_circle_mar_left: -.5rem;
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 1rem;
        padding-left: calc(var(--small_circle_mar_left) * -1);
        padding-top: calc(var(--small_circle_mar_top) * -1);
    }

    .event_wrap:hover,
    .event_wrap:focus{
        text-decoration: none;
    }

    .event_wrap:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    .events_container .event__date__wrap {
        display: grid;
        grid-template-areas: 'stack2';
    }

    .events_container .event__date {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 5rem;
        height: 5rem;
        text-align: center;
        border-radius: 50%;
        color: var(--tsunami_500);
        font-weight: 600;
        background: var(--light_blue_300);
        grid-area: stack2;
        z-index: 200;
    }

    .events_container .event__date__month-year {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.875rem;
        height: 1.875rem;
        background-color: var(--tsunami_500);
        border-radius: 50%;
        font-size: .75rem;
        font-weight: 600;
        color: #fff;
        grid-area: stack2;
        z-index: 500;
        margin-top: var(--small_circle_mar_top);
        margin-left: var(--small_circle_mar_left);
    }

    .events_container .event__detail__title {
        font-size: 1.125rem;
        font-weight: 900;
        color: var(--tsunami_500);
    }

    .events_container .event__detail__content {
        color: var(--main_text_color)
    }

    .events_container .event__date__day p {
        line-height: 1;
    }

    .events_container .event__date__day p:has(br) {
        text-align: center !important;
    }
}

@layer pages {
    .main_area5>* {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@layer components {
    .img_card {
        height: 20rem;

        display: grid;
        grid-template-areas: 'stack4';

        color: #fff;
    }

    .img_card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        grid-area: stack4;
        z-index: 100;
    }

    .img_card .card__inner {
        z-index: 600;
        padding: 3rem;
        grid-area: stack4;
        align-items: center;
        justify-content: center;
        display: flex;
        height: 100%;
    }

    .img_card .img__title {
        font-size: 2.125rem;
        font-weight: 600;
        text-shadow: 0 0 1rem #000;
    }
}