.fatbox {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 100000000000;

    .fatbox-container {
        display: flex;
        background-color: #000000;
        max-width: 80%;
        max-height: 80%;
        min-width: 250px;
        min-height: 200px;
        height: 100%;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 50px #000;
        .fatbox-prev {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,.8);
            width: 35px;
            height: 50px;
            transition: opacity .5s;
            &:hover {
                cursor: pointer;
            }
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 70%;
                background-image: url('data:image/png;base64,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');
                background-size: cover;
                background-repeat: no-repeat;
                transform: translate3d(-50%, -50%, 0px);
            }
        }
        .fatbox-next {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,.8);
            width: 35px;
            height: 50px;
            transition: opacity .5s;
            &:hover {
                cursor: pointer;
            }
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 80%;
                height: 70%;
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKoSURBVHic7d2xapNRHIbxf6oddFAnnRSs4BWoeAdehAVXRVvRRcHBOxC8GUGQLiJWBUfBrYMgCA4utXTwcZCWLpbmy0kPX97nt6c5h/eBBBLSqo6AE8Ad4A3wE9gBvgIvgUs9z6Y5Ay4A7/i/beB273NqDoDTwOdDxt/zB7jf+7xqDHh+hPEPRrDW+8xqBFgCvk8RgBEsEuDqlOMfjMCXg7EDbg4MwAgWAbAyQwBGsAiALSMIBjyaMYC9CHxjOEbASWDDCIIBZ4EPRhDMCGQEMgKVEaiaR7De+z4awAhkBDIClRGojEBlBCojUBmByghU+xFsGkEwI5ARyAhURqAyApURqIxAZQSq5hE87H0fDWAEMgIZgcoIVEagMgKVEaiMQGUEqqYRADzpfR8NYAQyAhmByghURqAyApURqIxA1TyCp73vowGMQEYgI1DtR/DeCILR9qPku73vowEaRrALXO99Hw3QMIJXve+igRpFsAucOe6zLx33Ey6iyWTyq6puVdXmDH9muapW2pzo6AygrcmMj6fJKXS8gHPAxzG+BGhGjcYH3wSOT8Pxd4Frve+jKTQcH+Be7/toCvh5QC7HD+b4wRw/GO3+R4Hjj43jB2s8vt8IHhPHD+b4wRw/mOMHc/xgjh/M8YM5fjDHD+b4wRqO76+Djo3jB3P8YI4fzPGDOX4wxw/m+MEcP5jjB3P8YI4frPH4673voyk4fjDHD+b4wRw/mOMHc/xgjh/M8YM5fjD+/Q6f4ydy/GCOH8zxgzl+MMcP5vjBHD+Y4wcDloENxw8FPHb8YMBWg/HXet9DAwCXHT8YcMPxgwFXHD8YMAG+OX4w4JnjBwNOAZ+OOP6D3ufVHADngbeHjL8NrPY+p+YIWAJWgdfAD+A38AV4AVzsfb4EfwGMb6oswBSFvwAAAABJRU5ErkJggg==');
                background-size: cover;
                background-repeat: no-repeat;
                transform: translate3d(-50%, -50%, 0px);
            }
        }
        .fatbox-close {
            position: absolute;
            right: 0;
            top: 0;
            background-color: rgba(0,0,0,.8);
            width: 50px;
            height: 50px;
            &:hover {
                cursor: pointer;
            }
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 70%;
                height: 70%;
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAARDSURBVHic7ZzNjkxbGIZX9ZkYuQDthgjSEs6k42YkZsQ1uAA/AwTXIZzDyIxoBgwQ5DGo2gmdVt1777XXer+fZ1y78r3v8+1VP6lUKRuAFfAv8BT4CHwFXgG3gN2SmAI4C9wGXgPfgA/AE+AKsDr84NPAY/7OZ2CvU5ZkJMDljbO/8Qg4PTx45xj5Az+A/c7ZkmMA9jeujuMRsCqsj/2TkksgzAj5A1cL8GzEBcMSXOsdNvkT1jfy95EunxTWb/jGkieBEIy/8wcOCut3+1PIJRBghnyALwX4f+LFuQSdmSkf4OVOKeXhjBn+KaXcySVoz6bzO2XtYCqPC7DL9s+MeRKIUeHOB/gEnBmecK/CE+YSNKCS/B8c/mKPaR8jjnri/Ii4EIs7yiXQpZmbXAI9mjvJJdChm4tcgv50d9B9gMDIdC8zSCDkOpcbyDGyXcsO5gj5juUHNIyZbs0MaghznZobWBizXZodXAjzHZoP0BE33bkJ0hB3nbkLtCBuu3IbrCLuO3IfcAZhugkTdAThOgkXeAthuwgb/DfCdxC5gMjZ/yBiEREzbyVSIZGyjiJCMREyzsJzQZ6zVcVjUR4zLYqnwjxlaYqH4jxk6IrlAi3PLoXFIi3OLI2lQi3NagoLxVqY0TTKBSvP5grFohVnco1S4UqzhEKheIUZQtNTQMoXoYeIlC9GSyEpX5QWYlK+OEsKSvlGWEJUyjdGTWEp3yiVxP2kzh8vp/weVFqClG+ZjkuQ8lXosAQpX42GS5DyVWmwBClfnQWXIOVbYYElSPnW2CzB3M/4sP6uwK38nd4DJEl1yJeAuCwgP5fACgvKzyVQp4H8XAJVGsrPJVCjg/xcAhU6ys8l6E0l+fmDEItUkp8/CbPIEsJyCYywpKhcAnFaCMolEKWlmFwCMXoIySUQoaeIXILOKAhQmCEkSsUrzRICxcIVZ3KJctHKs7nAQsEWZjSJpWItzWoCi4VanFkSy0Vanl0CDwV6yNAFT8V5ytIEj4V5zLQInovynK0KEQqKkHESkYqJlPVERCwkYuYjiVxE5OyllCyglMAdhA1+BOG6CBf4BITpJEzQCbjvxn3ACrjtyG2wBXDXlbtADXDTmZsgHTDfnfkAApjt0Ozggpjr0tzABjDTqZlBDSLfrfyADpDtWHYwh8h1LTdQAGQ6lxkkIN277z5A0s9BytehuYuUr0czJylfl8XdpHx9FnMEXKDOnybvd+omDMB+JVcXhic8CxykfDtUWoIDYLcANyrIz2O/MdR5ObhegBcz5eed3wnmnwTPC/Bxhvy88zvDvJPgfQHeTZSfd74ITD8J3hbg3gT5eeeLwbST4G4BLo2Un3e+KIw/CS4OFz5I+T4YsQT3f7/oFHB/y4M/AXsdcyUjAPaAz1t83gVOHb5oBZwHHgJvgC/AS+AmcKZTlmQiwC5wC/hv4/LNxu05YDU87hf3rdTv/0DGnQAAAABJRU5ErkJggg==);
                background-size: cover;
                background-repeat: no-repeat;
                transform: translate3d(-50%, -50%, 0px);
            }
        }
        img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }
    }
}


@media screen and (max-width:600px) {
    .fatbox {
        .fatbox-container {
            height:fit-content;
        }
    }
}