*{
            margin: 0%;
            padding: 0%;
        }
        body{
            background: #ff0000;
            /*background: radial-gradient(circle farthest-side at center center, #ff0000 0%, #ffff00 40%, #00b9ff 80%);*/
            font-family: 'Fuzzy Bubbles', cursive;
            text-align: center;
        }
        #container{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            /* grid-template-columns: repeat(3, 1fr); */
            grid-column-gap: 5vw;
            grid-row-gap: 5vh;
            width: 90%;
            padding: 20px;
            /*box-sizing: border-box; */
            max-width: 1280px;           


            position: relative;
            margin: 0 auto;
        }               
        .boxes{
            background-color: rgb(74, 88, 117);
            width: 100%;
            min-height: 200px;
            border: 5px dotted rgb(193, 67, 67);
            box-shadow: 24px 25px 57px 0px rgba(0,0,0,0.75);
            border-radius: 23px;
            height: fit-content;
        }
        @media only screen and (max-width: 1024px) {
            #container{
                grid-template-columns: 1fr 1fr;
            }
            /* .boxes{
                background-color: blueviolet;
            } */

        }
        @media only screen and (max-width: 640px) {
            #container{
                grid-template-columns: 1fr;
            }
            /* .boxes{
                background-color: initial;
            } */

        }

        figure.boxes img{
            width: 100%;
            border-radius: 19px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            transform-origin: top center;
            transition: all 0.3s ease-in;
        } 
        figure.boxes img:hover{
            transform: scale(1.5);
        }