#WRAPPER #CONTENTS {
background-image: url(../../img/reformfair20250823/reformfair_back.avif);
background-repeat: no-repeat;
background-position: top;
background-size: 100vw;
margin-top: 12rem;
padding: 6.4rem 1.6rem 0rem;
position: relative;
}

#WRAPPER #CONTENTS .back02 {
position: absolute;
left: 0;
top: 0;
width: 28%;  
}

#CONTENTS h1,
#CONTENTS h2 {
text-align: center;
}

#CONTENTS .eventphoto {
display: flex;
gap: 3.2rem;
max-width: 96rem;
margin: 8rem auto;
}


#CONTENTS .eventphoto .photo-img {
border: solid 2px;
padding: 5% 2% 2%;
width: 100%;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
position: relative;
gap: 3.2rem;
}

#CONTENTS .eventphoto .photo-img h3 {
position: absolute;
top: -7%;
}


#CONTENTS .eventphoto .photo-img img {
display: block;
border-radius: 0.8rem;
}


@media screen and (max-width: 899px) {
#WRAPPER #CONTENTS {
margin-top: 9rem;
}
}

@media (max-width: 768px) {
#CONTENTS .eventphoto {
flex-wrap: wrap;
} 

#CONTENTS .eventphoto .photo-img{
width: calc(100% / 3 - -3.2rem);
}
}

@media (max-width: 487px) {
#CONTENTS .eventphoto .photo-img {
padding: 12% 4% 4%;
width: 100%;
}

#CONTENTS .eventphoto .photo-img h3{
top: -9%; 
}

#CONTENTS .eventphoto{
gap: 8rem
}
}

@media (max-width: 425px) {
#WRAPPER #CONTENTS .back02 {
top: 1.6rem;
}
}