body{
    background-color: darkgray;
}
#boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 400px));
    gap: 1.44rem;
    padding: 1.44rem 0.833rem;
    justify-content: center;
    transform: translateY(200px);
}

#boxes img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: center center;
}

.box {
    position: relative;
    perspective: 700px;
    user-select: none;
}

/* come back here it centers everything what the heck */

.box article {
    transform-style: preserve-3d;
    transform: rotateX(0deg);
    transition: transform 0.5;
    transform-origin: center;
}

.front, .back{
    width: 300px;
    height: 300px;
    position:absolute;
    backface-visibility: visible;
    user-select: none;
}

.front{
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    opacity: 100%;
    transform: rotate(0deg) translate3d(0px, -70px, 110px);
}
.back{
    position: absolute;
    background: rgba(0, 0, 0, 0.75);;
    transform: rotateX(-80deg) translate3d(0px, 50px, 95px);
    opacity: 0%;

}
.back:hover{
    opacity: 100%;
    transition: 3s;
}

.box:hover article{
    transform: rotateX(80deg);
    transition: 2s;
    
}

p{
    text-align: center;
    color: #6f4e37
}

header{
    background-color: rgba(255, 228, 196, 0.603);
    text-align: center;
}
h1{
    color: #6f4e37;
}