* {
      box-sizing: border-box;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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