Photo Gallery - Copy this React, Tailwind Component to your project

body { box-sizing:border-box; width:100%; padding:0; background-color:#f0f0f0; text-align-last:left; margin:0; font-size:1em; overflow-x:hidden } .header { background-color:#222; padding:1em; text-align:center; font-weight:700; display:flex } .headermenu { display:flex; justify-content:center; align-items:center; gap:2em; color:#f0f0f0 } .headermenu_menu_point { color:#b6a8a8; font-size:1.2em } h1 { text-align-last:center; color:#e9c7c7; font-size:2em; font-family:Cambria,Cochin,Georgia,Times; text-align:center } h2 { color:#e9c7c7; font-size:1.8em; text-align:center } section { background-color:#fff; margin:1.25em; border-radius:.5em; margin-top:2em } .meine-wurzeln-container { width:100%; padding:10px; box-sizing:border-box; word-wrap:break-word; overflow-wrap:break-word } .meine-wurzeln-container h4 { max-width:100%; font-size:1.5em; overflow:hidden; text-overflow:ellipsis } .kultur-section { padding:2em; background-color:#fff; margin:1.5em auto; max-width:50em; border-radius:.5em } .kultur-content { display:grid; grid-template-columns:1fr 2fr; gap:1.5em } .video-column { display:flex; flex-direction:column; gap:1.5em; align-items:center; width:100%; max-width:250px; border-radius:.5em } .video-column video { max-width:250px; height:auto; border-radius:.5em } .PhotoGallery-Container { display:block; background-color:#fff; padding:2em; border-radius:.5em; box-shadow:0 .1em .8em #0000001a; margin:auto; max-width:90%; text-align:center } .Photo-Gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1em; padding:1.5em } .Photo-Gallery img { max-width:100%; height:auto; border-radius:.5em; transition:transform .3s ease } .gallery { margin:.3125em; width:11.25em; text-align:center } .gallery img { display:block; width:100%; height:auto } @media (max-width: 455px) { .photogallery-container { display:block; width:90%; margin:0 auto } } @media (min-width: 455px) and (max-width: 740px) { .photogallery-container { display:flex; flex-direction:column; align-items:center; width:100% } } @media (min-width: 740px) { .photogallery-container { display:flex; flex-direction:row; justify-content:center; width:80%; margin:0 auto } .container { max-width:1200px; margin:0 auto } } .fav-images-section { display:flex; flex-wrap:wrap; justify-content:space-around; gap:1em; padding:1em; transition:transform .3s ease-in-out,box-shadow .3s ease } .fav-images-section img { border-radius:.5em; transition:transform .3s ease-in-out; max-width:150px; max-height:180px } .fav-images-section img:hover { transform:scale(1.05); box-shadow:0 4px 8px #0003 } .fav-images-section video { width:120px; height:150px; object-fit:cover; border-radius:15px; transition:transform .3s ease-in-out } footer { background-color:#d1d0d0; color:#fff; text-align:initial; padding:.625em; position:sticky; width:98%; bottom:0 } @media (max-width: 1700px) { .headermenu { gap:1.5em } } @media (max-width: 1200px) { .kultur-content { grid-template-columns:1fr 1fr } } @media (max-width: 1024px) { .headermenu { flex-direction:row; justify-content:space-around } .Ueber-Mich-section { flex-direction:column; text-align:center; gap:1.5em; display:flex; align-items:flex-start; justify-content:center; padding:2em; width:100% } reise-section { text-align:center; width:100%; max-width:100%; margin:0 auto; padding:1em; display:flex; flex-wrap:wrap; justify-content:center; gap:.2em } .reise-section img { max-width:100%; height:auto } div.gallery { margin:.3125em; float:left; width:11.25em; text-align:center } country { display:flex; align-items:center; gap:.1em; margin-bottom:2em; padding:1em } country img { flex:1 1 150px; max-width:150px; width:auto; height:auto; border-radius:.5em } image-container { flex:1; max-width:200px } image-container img { width:100%; height:auto; border-radius:.5em } country-name { font-size:2em; font-weight:700; margin:.1em; color:#333; text-align:center; flex:1 } country-description { flex:2 1auto; text-align:justify; font-size:1em; color:#555; padding:.1em; margin:2em } } .kultur-content { flex-direction:column; align-items:center } @media (max-width: 768px) { .kultur-content { flex-direction:column; grid-template-columns:1fr } .Ueber-Mich-Bilder img { width:80% } .headermenu { flex-direction:column } .video-column { width:100% } .container,.kultur-section { padding:1em } } @media (max-width: 560px) { .lieblingslieder .grid { grid-template-columns:repeat(2,1fr) } .container { width:90%; padding:.5em } } @media (max-width: 420px) { h1 { font-size:1.8em } .Ueber-Mich-Bilder img { width:100% } .Ueber-Mich-Text { font-size:.9em } } @media (max-width: 330px) { nav { flex-direction:column; gap:.5em } h1 { font-size:1.5em } } body { box-sizing:border-box; width:100%; padding:0; background-color:#f0f0f0; margin:0; font-size:1em } .reise-section { text-align:center; width:100%; max-width:100%; margin:0 auto; padding:1em; display:flex; flex-wrap:wrap; justify-content:center; gap:.2em } .reise-section img { max-width:100%; height:auto } div.gallery { margin:.3125em; float:left; width:11.25em; text-align:center } div.gallery img { display:block; width:100%; height:auto } .country { display:flex; align-items:center; gap:.1em; margin-bottom:2em; padding:1em } .country img { flex:1 1 150px; max-width:150px; width:auto; height:auto; border-radius:.5em } .image-container { flex:1; max-width:200px } .image-container img { width:100%; height:auto; border-radius:.5em } .country-name { font-size:2em; font-weight:700; margin:.1em; color:#333; text-align:center; flex:1 } .country-description { flex:2 1 auto; text-align:justify; font-size:1em; color:#555; padding:.1em; margin:2em } .container,.reise-section { width:100%; margin:0 auto; padding:1em; box-sizing:border-box } .PhotoGallery-Container { background-color:#fff; padding:2em; border-radius:.5em; box-shadow:0 .1em .8em rgba (0,0,01); margin:auto; max-width:90%; text-align:center; background-color:#fff; padding:2em; border-radius:.5em; box-shadow:0 .1em .8em #0000001a; margin:0 auto; max-width:90%; text-align:center; width:fit-content; box-sizing:border-box } .photogallery-image:hover { transform:scale(1.05); box-shadow:0 4px 8px #0003 } .photogallery-a { display:block; border-radius:2em; width:fit-content; overflow:hidden; text-align:center; margin:0 auto; padding:1em } .photogallery-image { height:auto; width:100%; border-radius:2em; margin:0 auto; transition:transform ease-in-out .3s ease } .Photo-Gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1em; padding:1.5em } .Photo-Gallery img { max-width:100%; height:auto; border-radius:.5em; transition:transform .3s ease } h3 { color:#e9c7c7; font-size:1.5em; margin-bottom:1em } a { display:inline-block; margin-bottom:2em; color:#007bff; font-size:1.2em; text-decoration:none; border-radius:1em } a:hover { text-decoration:underline } .row { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.5em; padding:1em; margin-bottom:2em } .row img { width:100%; height:auto; border-radius:.5em; transition:transform .3s ease; padding:.25em } .Photo-Gallery-container img { margin:3em; border-radius:.5em; transition:transform .3s ease; max-width:100%; height:auto; box-sizing:border-box } .Ueber-Mich-section { display:flex; gap:1.5em; align-items:flex-start; justify-content:center; padding:2em; width:100%; max-width:1200px; margin:0 auto } .Ueber-Mich-Bilder { flex:1; display:flex; flex-direction:column; gap:1.5em; justify-content:flex-start } .Ueber-Mich-Bilder img { width:10em; max-width:200px; height:auto; border-radius:.3125em } .Ueber-Mich-Text { width:90%; max-width:1218px; text-align:justify } footer { background-color:#d1d0d0; color:#fff; text-align:center; padding:.625em; position:sticky; width:98%; bottom:0 } @media (max-width: 768px) { .reise-section img { max-width:100%; height:auto } .country img { max-width:120px; height:auto } .country-description { font-size:.9em; text-align:center; margin-top:1em } .Ueber-Mich-section { flex-direction:column; gap:1.5em; padding:1.5em } .Ueber-Mich-Bilder img { width:100%; max-width:180px } .Ueber-Mich-Text { text-align:center } .country-name { font-size:1.5em } .reise-section,.country { flex-direction:column; align-items:center; padding:1.5em } } @media (max-width: 420px) { h1 { font-size:1.8em; text-align-last:center } .Ueber-Mich-Bilder img { width:100%; max-width:180px } .Ueber-Mich-Text { font-size:.9em } .fav-images-section img { max-width:120px; max-height:150px } .fav-images-section video { width:100px; height:120px } .country img { max-width:120px } .country-name { font-size:1.2em } } .Photo-Gallery img { max-width:100%; height:auto; border-radius:.5em; transition:transform .3s ease } .Photo-Gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1em; padding:1.5em; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1em } h1,h2,h3,h5,h6 { white-space:nowrap } .PhotoGallery-Container { margin:0 auto; padding:2em; background-color:#fff; border-radius:.5em; box-shadow:0 .1em .8em #0000001a; max-width:70%; text-align:center } @media (max-width: 740px) and (min-width: 455px) { .Photo-Gallery { grid-template-columns:repeat(2,1fr) } } @media (max-width: 455px) { .Photo-Gallery { grid-template-columns:1fr } } .Ueber-Mich-section { max-width:70%; margin:0 auto; padding:2em } .lieblingslieder .grid { display:grid; gap:1em } @media (max-width: 768px) { .lieblingslieder .grid { grid-template-columns:repeat(2,1fr) } } @media (min-width: 769px) and (max-width: 1024px) { .lieblingslieder .grid { grid-template-columns:repeat(3,1fr) } } footer { text-align:center; display:flex; justify-content:center; align-items:center; padding:1em } das ist mein aktueller code kannst du mir bitte helfen den photogallery container auf den inhalt zu beschränken und mittig zu machen