.square-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.square {
    width: calc(17% - 10px);
    /* height: 0;
    padding-top: calc(20% - 10px); */
    background-color: #000;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.square img {
    width: 100%;
  }
@media screen and (max-width: 768px) {
    .square {
        width: calc(33.33% - 10px);
        /* padding-top: calc(33.33% - 10px); */
    }
}

@media screen and (max-width: 480px) {
    .square {
        width: calc(100% - 10px);
        /* padding-top: calc(100% - 10px); */
    }
}

/* Adicionamos esta regra para dispositivos maiores que 768px */
@media screen and (min-width: 769px) {
    .square {
        width: calc(17% - 10px);
        /* padding-top: calc(20% - 10px); */
    }
}