.square {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  min-height: 164px;
}

@media (min-width: 576px) {
  .square {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    min-height: 180px;
  }
}

@media (min-width: 992px) {
  .square {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    min-height: 180px;
  }
}

p {
  font-family: "Inter", Sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
}

@media (min-width: 768px) {
  .box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

.square {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  /*min-height: 445px;*/
}

@media (min-width: 576px) {
  .square {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    min-height: 164px;
  }
}

@media (min-width: 992px) {
  .square {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    /*min-height: 278px;*/
  }
}

.square img {
  max-width: 100%;
  height: auto;
}

.square p {
  width: 100%;
  text-align: center;
}

p {
  font-family: "Inter", Sans-serif;
  font-size: 14px;
  font-weight: 400;
}

@media (min-width: 768px) {
  .box {
    flex: 1;
  }
}

.boxtitle {
  font-size: 12px;
}

.box {
  cursor: pointer;
  border: 3px solid tomato;
}