.gallery img {
            width: 200px;
            height: auto;
            margin: 10px;
            cursor: pointer;
            border-radius: 8px;
            transition: transform 0.2s;
        }
        .gallery img:hover {
            transform: scale(1.05);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }
        .modal img {
            max-width: 90%;
            max-height: 90%;
        }
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 2rem;
            cursor: pointer;
            user-select: none;
            opacity: 0.5;
        }

        .left-arrow {
            left: 50px;
        }
        .right-arrow {
            right: 50px;
        }

        .left-arrow:hover, .right-arrow:hover {
            opacity: 1;
        }

        .close {
            position: absolute;
            top: 5%;
            right: 50px;
            color: white;
            background-color: color(srgb 0.0902 0.0902 0.0902);
            font-size: 2rem;
            cursor: pointer;
            user-select: none;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            font-size: 17px;
            border: 1px solid rgb(51, 51, 51);
            padding: 8px 20px;
            border-radius: 7px;
            font-family: "Clash Display";
        }

        .close:hover {
            background-color: color(display-p3 0.949 0.3412 0.1647);
            color: black;
        }

        @media only screen and (max-width: 768px) {

        .close {
            right: 5%;
        }
    }