* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif;
    }

    .photo-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .photo-grid .photo {
      flex: 1 1 calc(25% - 10px);
      max-width: calc(25% - 10px);
    }

    .photo-grid .photo img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    /* Responsivo para tablets */
    @media (max-width: 992px) {
      .photo-grid .photo {
        flex: 1 1 calc(33.33% - 10px);
        max-width: calc(33.33% - 10px);
      }
    }

    /* Responsivo para smartphones */
    @media (max-width: 768px) {
      .photo-grid .photo {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
      }
    }

    /* Telas muito pequenas */
    @media (max-width: 480px) {
      .photo-grid .photo {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }

  /* FOTOS COM 50% - METADE DA TELA*/

      .photo-grid .photo2 {
      flex: 1 1 calc(50% - 10px);
      max-width: calc(50% - 10px);
    }

    .photo-grid .photo2 img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    /* Responsivo para tablets */
    @media (max-width: 992px) {
      .photo-grid .photo2 {
        flex: 1 1 calc(33.33% - 10px);
        max-width: calc(33.33% - 10px);
      }
    }

    /* Responsivo para smartphones */
    @media (max-width: 768px) {
      .photo-grid .photo2 {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
      }
    }

    /* Telas muito pequenas */
    @media (max-width: 480px) {
      .photo-grid .photo2 {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }


  /* FOTOS COM 33% - 1 TERÇO DA TELA*/

      .photo-grid .photo3 {
      flex: 1 1 calc(33.33% - 10px);
      max-width: calc(33.33% - 10px);
    }

    .photo-grid .photo3 img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    /* Responsivo para tablets */
    @media (max-width: 992px) {
      .photo-grid .photo3 {
        flex: 1 1 calc(33.33% - 10px);
        max-width: calc(33.33% - 10px);
      }
    }

    /* Responsivo para smartphones */
    @media (max-width: 768px) {
      .photo-grid .photo3 {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
      }
    }

    /* Telas muito pequenas */
    @media (max-width: 480px) {
      .photo-grid .photo3 {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }