···

       
61
       
 
       
        h1 {{ text-align: center; }}

     

       
62
       
 
       
        .gallery {{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }}

     

       
63
       
 
       
        .photo {{ border: 1px solid #ddd; padding: 5px; animation: fadeIn 0.1s; flex: 0 1 200px; position: relative; }}

     

       
64
       
-
       
        .photo img {{ width: 100%; height: auto; transition: opacity 0.3s; }}

     

       
65
       
-
       
        .photo .colored-img {{ position: absolute; top: 5px; left: 5px; opacity: 0; pointer-events: none; }}

     

       
66
       
 
       
        .photo:hover .dithered-img {{ opacity: 0; }}

     

       
67
       
 
       
        .photo:hover .colored-img {{ opacity: 1; }}

     

       
68
       
 
       
        .photo .actions {{ text-align: center; margin-top: 5px; }}

     

···

       
61
       
 
       
        h1 {{ text-align: center; }}

     

       
62
       
 
       
        .gallery {{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }}

     

       
63
       
 
       
        .photo {{ border: 1px solid #ddd; padding: 5px; animation: fadeIn 0.1s; flex: 0 1 200px; position: relative; }}

     

       
64
       
+
       
        .photo img {{ width: 100%; height: 100%; transition: opacity 0.3s; object-fit: cover; }}

     

       
65
       
+
       
        .photo .colored-img {{ position: absolute; top: 5px; left: 5px; opacity: 0; pointer-events: none; width: calc(100% - 10px); height: calc(100% - 10px); }}

     

       
66
       
 
       
        .photo:hover .dithered-img {{ opacity: 0; }}

     

       
67
       
 
       
        .photo:hover .colored-img {{ opacity: 1; }}

     

       
68
       
 
       
        .photo .actions {{ text-align: center; margin-top: 5px; }}