.layoutGallery{
    box-shadow: 0px 10px 20px 0px #29292A12;
    background-color: var(--c-white);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;


    .yearList{
        display: flex;
        gap: 56px;
        border-bottom: 1px solid var(--c-primary-lighter);
        .yearItem > a{
            font-family: Open Sans;
            font-size: 16px;
            font-weight: 700;
            line-height: 32px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color:var(--c-text);
            position: relative;
            height: 48px;
        }
        .yearItem{
            font-family: Open Sans;
            font-size: 16px;
            font-weight: 700;
            line-height: 32px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color:var(--c-text);
            position: relative;
            height: 48px;
        }
        .yearItem > .active{
            color:var(--c-primary);
            &:after{
                content: "";
                position: absolute;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: var(--c-primary);
                height: 8px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
        }
        .yearItemSelected{
            color:var(--c-primary);
            &:after{
                content: "";
                position: absolute;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: var(--c-primary);
                width: 37px;
                height: 8px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
        }
    }

    .galleryTitle{
        font-family: "Inter";
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: var(--c-title)
    }

    .galleryPageList{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,1fr);
        gap: 24px;

        .galleryPageItem{
            border-radius: 16px;
            img{
                border-radius: 16px;
                max-width: 100%;
                max-height: 100%;
            }
            .galleryPageItemBottom{
                min-height: 32px;
                background: #151834CC;
                backdrop-filter: blur(4px);
                margin-top: -32px;
                border-bottom-left-radius: 16px;
                border-bottom-right-radius: 16px;

                font-family: "Inter";
                font-size: 12px;
                font-weight: 700;
                line-height: 16px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: var(--c-white);
                padding-inline: 16px;
            }
        }
    }
}

.menuMedia-item{
    border-radius: 4px;
    height: 48px;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color:#1B2238;
    display: flex;
    align-items: center;
    padding: 12px;
    display: flex;
    white-space: nowrap!important;
    &:hover{
        cursor: pointer;
        background:#1b22380e;

    }
}
.menuMedia .selected{
    font-weight: 700;
    background:   linear-gradient(0deg, #0A214F, #0A214F);
    color:#FFFFFF;
}
.menuMedia{
    box-shadow: 0px 10px 20px 0px #29292A12;
    background: #FFFFFF;
    min-width: 254px;
    padding: 24px 16px;
    border-radius: 4px;
    height: 100%;
}
.layoutGalleryInner{
    box-shadow: 0px 10px 20px 0px #29292A12;
    background: var(--c-white);
    padding: 32px;
    gap: 32px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;

    .galleryInnerTop{
        display: flex;
        justify-content: space-between;
        align-items: center;

        .galleryInnerTopTitle{
            font-family: "Inter";
            font-size: 28px;
            font-weight: 600;
            line-height: 32px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: var(--c-title);
        }
        .galleryInnerTopDate{
            font-family: "Inter";
            font-size: 28px;
            font-weight: 400;
            line-height: 32px;
            text-align: right;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color:var(--c-subtitle-secondary);
        }

    }



    .menuMedia{
        box-shadow: 0px 10px 20px 0px #29292A12;
        background: #FFFFFF;
        min-width: 254px;
        padding: 24px 16px;
        border-radius: 4px;
        height: 100%;
    }



    .menuMedia-item{
        border-radius: 4px;
        height: 48px;
        font-family: "Open Sans";
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color:#1B2238;
        display: flex;
        align-items: center;
        padding: 12px;
        display: flex;
        white-space: nowrap!important;
        &:hover{
            cursor: pointer;
            background:#1b22380e;

        }
    }

    .menuMedia .selected{
        font-weight: 700;
        background:   linear-gradient(0deg, #0A214F, #0A214F);
        color:#FFFFFF;
    }

    .layoutMain{
        display: flex;
        gap: 24px;
    }

    .galleryInnerBody{
        display: flex;
        flex-direction: column;
        gap: 16px;

        #galleryInnerSelected{
            border-radius: 16px;
            max-height: 800px;
            object-fit: cover;
            object-position: top;
        }
        #photoGalleryRight{
            transform: rotate(180deg);
        }
        #photoGallerySelectedItem{
            color:var(--c-primary);
            font-family: "Inter";
            font-size: 24px;
            font-weight: 700;
            line-height: 32px;
            text-align: center;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;

        }
        .photoGalleryAllCount{
            color:var(--c-number);
            font-family: "Inter";
            font-size: 24px;
            font-weight: 500;
            line-height: 32px;
            text-align: center;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
        }
        .galleryInnerAction{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 32px;
            .galleryInnerLine{
                width: 100%;
                height: 3px;
                background: var(--c-line);
            }
        }
        .photoGalleryAllCount{
            display: flex;
            gap: 8px;
        }
    }
    .galleryInnerImgList{
        display: flex;
        overflow: hidden;
        gap: 24px;

        .galleryInnerImgItem{
            border-radius: 16px;
            max-width: 363px;
            min-width: 363px;
            height: 223px;
            display: flex;
            img{
                border-radius: 16px;
                max-width: 363px;
                min-width: 363px;
                height: 223px;
                object-fit: cover;
                object-position: 50% 20%;
            }
        }
    }
    .galleryInnerBottom{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media screen and (max-width: 768px) {
    .layoutGallery {
        & .galleryPageList {
            & .galleryPageItem {
                .galleryPageItemBottom {
                    font-size: 10px;
                }
            }
        }
    }
    .layoutGalleryInner{
        padding: 16px;
        gap: 16px;

        .galleryInnerTop{
            
            .galleryInnerTopTitle{
                font-size: 20px;
                line-height: 24px;           
            }
            .galleryInnerTopDate{
                font-size: 20px;
                line-height: 24px;
            }
        }
        .galleryInnerBody{
            gap: 12px;
            .photoGalleryAllCount{
                font-size: 20px;
                line-height: 28px;
            }
            .galleryInnerAction{
                gap: 24px;
            }
        }
    }
}
@media screen and (max-width: 426px) {
    .layoutGallery {
        & .galleryPageList {
            & .galleryPageItem {
                .galleryPageItemBottom {
                    font-size: 7px;
                }
            }
        }
    }
    .layoutGalleryInner{
        padding: 12px;
        gap: 12px;
        .galleryPageList{
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(1, 1fr);
        }
        .galleryInnerTop{
            
            .galleryInnerTopTitle{
                font-size: 16px;
                line-height: 20px;           
            }
            .galleryInnerTopDate{
                font-size: 16px;
                line-height: 20px;   
            }
        }
        .galleryInnerBody{
            gap: 8px;
            .photoGalleryAllCount{
                font-size: 16px;
                line-height: 20px;
            }
            .galleryInnerAction{
                gap: 12px;
            }
        }
    }
}